Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label

最近刚进行 Vue3 + Element plus 项目实践,在进行表单二次封装的时候,表单元素 select 下拉框组件选中一个选项后显示的是 value 而不是 label,下面上代码:

原来的写法:

javascript 复制代码
<el-select
  v-if="v.type === 'select'"
  v-model="formModel[v.id]"
  :placeholder="v.placeholder"
  clearable
>
  <el-option
    v-for="(item, i) in v.option"
    :value="item.value"
    :key="`${i}${v.value}`"
  >
    {{item.label}}
  </el-option>
</el-select>

这样写,选中一个选项 "是" 后,下拉框中显示的一直是 value---1,而不是 label---是,如图:

修改后的写法:

javascript 复制代码
<el-select
  v-if="v.type === 'select'"
  v-model="formModel[v.id]"
  :placeholder="v.placeholder"
  clearable
>
  <el-option
    v-for="(item, i) in v.option"
    :label="item.label"
    :value="item.value"
    :key="`${i}${v.value}`"
  />
</el-select>

这样写,选中一个选项 "是" 后,下拉框中显示的是 label---是,而不是 value---1,如图

相关推荐
Mr Xu_6 分钟前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝10 分钟前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions18 分钟前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发19 分钟前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
程序员猫哥_26 分钟前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞0527 分钟前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl
我爱加班、、32 分钟前
Websocket能携带token过去后端吗
前端·后端·websocket
AAA阿giao32 分钟前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
杨超越luckly38 分钟前
HTML应用指南:利用GET请求获取中国500强企业名单,揭秘企业增长、分化与转型的新常态
前端·数据库·html·可视化·中国500强
hedley(●'◡'●)1 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机