el-select数据回显异常探究_el-select 未正常回显

场景再现

数据回显不成功一般是因为数据类型不匹配，所以需要处理成统一数据类型。

解决方案

如果 v-model 绑定的数据是 string 类型，:value 绑定的数据是 number 类型，我这里是通过 + ‘’ ，统一处理成 string 类型

 <el-form-item label="所属部门">
   <el-select v-model="partSmallForm.belongDepartment" placeholder="请输入所属部门">
      <el-option
        v-for="item in deptList"
        :key="item.id"
        :label="item.name"
        :value="item.id + ''"
        >
      </el-option>
  </el-select>
</el-form-item>

1
2
3
4
5
6
7
8
9
10
11
12

如果 v-model 绑定的数据是 number 类型，:value 绑定的数据是 string 类型，我这里是通过 *1 ，统一处理成 number 类型

 <el-form-item label="所属部门">
   <el-select v-model="partSmallForm.belongDepartment" placeholder="请输入所属部门">
      <el-option
        v-for="item in deptList"
        :key="item.id"
        :label="item.name"
        :value="item.id*1"
        >
      </el-option>
  </el-select>
</el-form-item>

1
2
3
4
5
6
7
8
9
10
11
12

本文转自 https://blog.csdn.net/qq_40881695/article/details/123152629，如有侵权，请联系删除。