解决el-select回显异常显示option选项的value 而不是显示label

最新推荐文章于 2025-04-07 11:36:03 发布

是我呀！卡布达

最新推荐文章于 2025-04-07 11:36:03 发布

阅读量1.8k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_40745445/article/details/132380390

版权

文章讲述了在Vue项目中，由于回显的value和选项value类型不一致导致的问题，提出将选项value中的数字userId转换为字符串解决方法，并给出了相应的el-select和el-option代码示例。

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

1、问题

回显的value和选项value类型不同
form中v-model="form.userId"是字符串类型
option中:value=“item.userId” 选项id是数字类型

2、办法

:value=“item.userId” 改为 :value=“item.iduserId+‘’”（转换成字符串）

<el-form-item label="领导姓名" prop="createrId">
  <el-select v-model="form.createrId" placeholder="请选择领导姓名" clearable style="width:300px" filterable
    @change="handleUserChange">
    <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId+''">
      <span style="float: left">{{ item.nickName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dept.deptName }}</span>
    </el-option>
  </el-select>
</el-form-item>