vue如何解决el-select下拉框显示ID不显示label问题

更新时间：2023年06月08日 16:18:51 作者：G-old

这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

解决el-select下拉框显示ID不显示label

问题

Form中用el-select显示订单状态：

<el-select v-model="dataForm.orderStatus">
      <el-option label="待支付" value="0"></el-option>
      <el-option label="已支付" value="1"></el-option>
      <el-option label="已确认" value="2"></el-option>
      <el-option label="已取消" value="3"></el-option>
</el-select>

界面显示value，不显示label

最终解决方法

在option的value属性前加冒号“：”

<el-select v-model="dataForm.orderStatus">
      <el-option label="待支付" :value="0"></el-option>
      <el-option label="已支付" :value="1"></el-option>
      <el-option label="已确认" :value="2"></el-option>
      <el-option label="已取消" :value="3"></el-option>
  </el-select>

完美解决

修改组件el-select默认展示id不展示label

项目中有修改组件，点击获取到表单的数据，但是有一个下拉框展示的是id而不是name

看了半天代码，双向绑定和传值都没问题，查了半天资料最后发现是后端传给我的id字段和前端的id类型不同，一个是字符串一个是number，返回的数字和el-option选框里的value值类型对应不上

解决办法

将v-for遍历的数组中id字段都改成number类型

修改前：

修改后：

修改后页面正常显示：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue之a-table中实现清空选中的数据
今天小编就为大家分享一篇vue之a-table中实现清空选中的数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue-Cli配置代理转发解决跨域问题的方法
本文主要介绍了Vue-Cli配置代理转发解决跨域问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
element-ui表格数据转换的示例代码
这篇文章主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue-router清除url地址栏路由参数的操作代码
这篇文章主要介绍了vue-router清除url地址栏路由参数,本文给大家介绍的非常详细,需要的朋友可以参考下
2015-11-11
vue实现点击复制文本到剪贴板方式
文章介绍了四种在Vue中实现复制文本到剪贴板的方法：1.使用navigator.clipboard.writeText（需要在安全域下使用）；2.使用即将废弃的execCommand方法；3.通过引入vue-clipboard2库；4.使用clipboard.js库,推荐使用第一种或第三种方法
2025-10-10
Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
本文分别使用 SFC（模板方式）和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装，实现配置化的菜单，有了配置化的菜单，后续便可以根据路由动态渲染菜单，对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧
2022-09-09
Vue transition实现点赞动画效果的示例
点赞动画是网页评论中常见的功能，本文将介绍如何用vue实现这一效果。点赞时爱心缩小变大，变大时略微大一点再变正常，取消点赞时爱心无动画，同时数字滚动，+1 时向上滚动，-1 时向下滚动
2021-05-05
从vue源码看props的用法
平时写vue的时候知道 props 有很多种用法，今天我们来看看vue内部是怎么处理 props 中那么多的用法的。非常具有实用价值，需要的朋友可以参考下
2019-01-01
Vue.js中v-for指令的用法介绍
这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
使用Vue3和Pinia实现网页刷新功能
在现代 Web 开发中,保持用户界面的动态性和响应性至关重要,当用户触发某些操作时,例如点击按钮或者完成表单提交,我们往往需要刷新页面的一部分来展示最新的数据,本文将介绍如何使用 Vue 3 和 Pinia 来实现这一功能,需要的朋友可以参考下
2024-08-08