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中路由传参以及跨组件传参详解
这篇文章主要给大家介绍了关于vue中路由传参以及跨组件传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Vue 3中的异步操作管理示例分析
在现代Web应用开发中,异步操作是常见的挑战,本文介绍了Vue3中管理多个异步操作的方法,帮助开发者提高编码效率和应用性能,感兴趣的朋友跟随小编一起看看吧
2024-09-09
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-02
vue filters和directives访问this的问题详解
这篇文章主要介绍了vue filters和directives访问this的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
vue axios同步请求解决方案
这篇文章主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下
2017-09-09
element-ui 上传图片后清空图片显示的实例
今天小编就为大家分享一篇element-ui 上传图片后清空图片显示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详解vue父子组件状态同步的最佳方式
这篇文章主要介绍了vue父子组件状态同步的最佳方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
express+vue+mongodb+session 实现注册登录功能
这篇文章主要介绍了express+vue+mongodb+session 实现注册登录,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
vue+iview+less 实现换肤功能
这篇文章主要介绍了vue+iview+less 实现换肤功能,项目搭建用的vue—cli，css框架选择的iview，具体操作流程大家跟随脚本之家小编一起看看吧
2018-08-08
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧,非常不错，具有一定的参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起看看吧
2018-05-05