如何在select输入表单中自动选中下拉菜单的第一个选项

解决步骤 #

根因 #

你当前使用v-model双向绑定下拉选中值，初始状态下form.department_id的值为null，和所有option的:value值都不匹配，因此不会自动选中任何选项。

修复方法 #

在组件初始化、部门列表数据加载完成的逻辑中，给绑定的选中值赋第一个部门的id即可：

// 先判断部门列表不为空再赋值，避免数组为空时报错
if (Array.isArray($page.departments) && $page.departments.length) {
  form.department_id = $page.departments[0].id
}

如果是Vue2项目，这段代码可以写在mounted钩子中；如果是Vue3 + 组合式API，写在onMounted钩子或者$page.departments数据的监听回调里即可。

可选优化 #

如果存在部门列表为空的场景，可以在下拉列表中增加一个兜底的默认选项，避免无选项时显示异常，同时建议给v-for循环补上key属性避免列表渲染异常：

<div class="form-group mb-6">
  <label class="form-label">{{ $trans('labels.department') }}</label>
  <select class="form-select" v-model="form.department_id">
    <!-- 新增兜底选项 -->
    <option value="">请选择部门</option>
    <option :value="department.id" v-for="department in $page.departments" :key="department.id">
      <p class="mt-1 text-sm leading-5 text-gray-500">
        {{ department.name }}
      </p>
    </option>
  </select>
</div>

内容的提问来源于stack exchange，提问作者valdimiro einstein