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 package.json配置深入分析
这篇文章主要介绍了Vue package.json配置，package.json是每个前端项目都会有的json文件，位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json
2023-01-01
从0搭建Vue3组件库之如何使用Vite打包组件库
这篇文章主要介绍了从0搭建Vue3组件库之如何使用Vite打包组件库,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
Vue3中Slot插槽透传,二次封装Arco的table组件详解
这篇文章主要介绍了Vue3中Slot插槽透传,二次封装Arco的table组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
vue3 mark.js 实现文字标注功能(案例代码)
这篇文章主要介绍了vue3 mark.js 实现文字标注功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue中的<template>标签与react中的<></>标签区别详解
这篇文章主要为大家介绍了vue中的<template>标签与react中的<></>标签区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程
在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块,这篇文章主要介绍了Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南详细教程,需要的朋友可以参考下
2024-01-01
el-select二次封装实现可分页加载数据的示例代码
使用el-select时一次性渲染几百条数据时会造成页面克顿, 可以通过分页来实现,所以本文给大家介绍了el-select二次封装实现可分页加载数据,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下
2023-12-12
vue编译器util工具使用方法示例
这篇文章主要为大家介绍了vue编译器util工具使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue中mint-ui的使用方法
这篇文章主要为大家详细介绍了vue中mint-ui的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
vue 面包屑导航组件封装
本文主要介绍了vue 面包屑导航组件封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07