el-select数据回显异常探究

爱写Bug的麦洛

已于 2022-05-29 14:18:28 修改

阅读量3.4k

点赞数 4

分类专栏： # Element 文章标签： vue

于 2022-05-17 17:36:09 首次发布

原文链接：https://blog.youkuaiyun.com/qq_40881695/article/details/123152629

版权

Element 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在 Vue 开发中遇到的数据回显不成功的问题，通常原因是数据类型不匹配。作者提供了解决方案，对于 v-model 绑定为 string 类型而 :value 绑定为 number 类型的情况，可以使用 +'' 将 number 转为 string；反之，如果 v-model 是 number 类型而 :value 是 string 类型，则用 *1 转换为 number 类型。示例代码展示了在 `<el-select>` 组件中如何处理这种数据类型转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景再现

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

解决方案

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