【Vue】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>

 

如果 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>

 

转载自：https://blog.csdn.net/Milogenius/article/details/124826335