vue的el-select控件不显示value值，显示value对应的label值

最新推荐文章于 2024-04-29 10:21:25 发布
最新推荐文章于 2024-04-29 10:21:25 发布
阅读量4.4k 收藏 5
点赞数 2
分类专栏： elemnt-ui vue el-select 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44238871/article/details/106767982
版权
本文介绍了在使用Vue的el-select组件时遇到的问题，即显示的是value值而不是对应的label。通过在data中定义一个转换值的变量，并在回写数据时根据需要转换类型（如String、Number），成功解决了这个问题。
摘要由CSDN通过智能技术生成 
    <el-form-item label="车辆种类" prop="type">
      <el-select v-model="dataForm.type" placeholder="请选择">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.l
最低0.47元/天 解锁文章
归档成功
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue element-ui el-select 控件 显示value 而不显示 label的解决办法
souwer的博客
11-30 1346
vue element-ui el-select 控件，显示value而不显示label的解决办法
Select onChange causes warning: label of value is not same as label in Select options.
最新发布
u010234868的专栏
06-03 132
select的options中的label、value没有跟默认值对应上。
vue解决el-select下拉框显示ID不显示label问题
goldsmith的博客
03-11 1338
vue解决el-select下拉框显示ID不显示label问题
element-ui的el-select如何显示value对应的label值
qq_46337964的博客
03-14 2130
今天写项目的时候遇到了一个问题，在这里做一个笔记，希望帮助更多的祖国flower。 目前的效果： 想要的效果： 看到“目前的效果”我就感到迷茫了，为啥就不管来，于是我上网找了一些资料，找到了答案。 原因是：由于得到的数据类型对应不上表单操作的数据类型 。 罪魁祸首就在这！！！因为我从后台读取的数据类型是number类型，如下： 知道原因，就很好解决啦，把value的值改成number类型的就OK了。 没修改之前是这样的： 修改完之后是这样的： 特别注意：单引号表示字符，双引号表示的是字符串。 到此
el-select获取下拉框选中的label和value值
Komorebi_00的博客
06-20 6793
【示例1】 【示例2】 【示例3】
vue解决el-select下拉框不显示label问题
weixin_46127011的博客
01-05 2670
最近在开发项目的过程中，遇到了这个问题。el-select的下拉框数据是后端返回的，当点击下拉框选项时会请求后端的接口，当在请求接口的过程中label是有显示的，但是在请求完成后，label就没有显示了。vue无法监听动态新增属性的变化，所以当向后端请求数据完成时，这时对应的v-model绑定的值是响应式的，这时候vue是无法监听到的。注：v-model绑定的值须是object.prop的形式。使用this.$set()方法。
el-cascader 获取label、value值
Queen_sy的博客
01-19 2681
实现数组对象中的key对应value,label对应title。3 为了获取选中数据的label。输出最后一层label和value。1 绑定对应数据实现数据的对应。
Vue elementui中el-select获取选中label的值
qq_46617584的博客
10-27 4617
Vue elementui中el-select获取选中label的值
vue el-element中el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值
qq_45067263的博客
04-29 1740
el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值。第一个值为选择的数值，暂时用不到，第二个值为数据的下标，用于事件改变值时提供坐标，第三个值为改变后的整条数据。this.$set方法，第一个值为改变谁，第二个值为改变值的坐标，第三个则是改变后数据，重新赋值给详情数据。this.offerBatchModifyData是我的详情数据，InquiryItemList是数组，可以根据自己的数据做相应调整，这样就可以正常显示选中的数据了。
vue el-element中el-select的el-option选中值，但页面框中不显示值，需要输入一个其他框值才显示，input同理
ll_883963的博客
07-07 3550
问题描述： el-element中el-select的el-option选中值，但页面框中不显示值，需要输入一个其他框值才显示。 //在el-select中写一个事件 @change="change" <el-form-item prop="aa"> <el-select v-model="dataForm.aa" @change="change" //加上这个函数 > <el-option v-for=.
vue实现select下拉显示隐藏功能
12-30
今日，怂怂就来说说，在项目中刚遇到这么一个功能需求； 描述：当下拉选择不同的属性选项，需展示对应的内容界面；... <el label=表结构变更 value=tableChange></el> <el-option label=接口变更 va
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
Element的el-tree控件是基于Vue.js的前端组件库Element UI中的一个强大功能，用于展示层次结构的数据，如目录、组织架构等。el-tree控件的后台数据结构生成和方法抽取是实现动态加载、异步数据加载以及树状数据操作...
vue select 获取value和lable操作
10-14
总结起来，在Vue中处理`<Select>`组件时，通过设置`v-model`和`:label-in-value`（或Element UI的`:value-key`），我们可以方便地获取选中项的`value`和`label`。这在处理复杂表单数据或者需要与后台交互时尤其有用...
vue 入门，v-model数据绑定
05-03
当你在输入框中输入文字时，`message`的值会实时更新，反之，如果在Vue实例中直接改变`message`的值，输入框的显示也会随之变化。这种双向绑定使得数据的管理变得非常直观。 接下来，我们通过一个简单的示例来...
Vue表单控件数据绑定方法详解
10-15
对于表单控件，Vue提供了`v-model`指令，用于实现双向数据绑定，即表单控件的值与Vue实例的数据对象之间同步。本文将深入探讨Vue表单控件的各种数据绑定方法。 首先，基础的`v-model`用法适用于大部分表单元素，如`...
vue中DateTimePicker日期时间选择器
热门推荐
weixin_44238871的博客
06-15 1万+
在vue中使用到DateTimePicker日期时间选择器进行日期时间（yyyy-MM-dd HH:mm:ss）的显示和增删改 在后端实体类中的日期格式： @JsonFormat(shape = JsonFormat.Shape.STRING, pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") private Date endtime; 前端的控件： <el-date-picker v-model="dataForm.end
vue定时器（实时刷新列表）
weixin_44238871的博客
06-15 2931
直接加载定时器，对页面列表进行实时刷新 在（打开新页面对列表数据进行增删改或）对列表数据进行操作后，实时刷新列表（这里会出现一个小问题，比起reload不会页面变白刷新页面，因为是定时器，所以在列表上会出现转圈加载图标） // 直接加载定时器和列表 created () { clearTimeout(this.timer) this.timer() this.getDataList() }, activated () { t
glg练习总结（一）
weixin_44238871的博客
05-22 374
List<TCarCarEntity> company = tCarCarService.queryCompany();//车辆的注册公司信息 Tree tree = new Tree();//第一层 tree.setName("按注册单位"); List<Tree> list1 = new ArrayList<Tree>(); for(TCarCarEntity item2:company){ Tree tre
vue 用element-ui做一个 form输入框有下拉选择 是树控件
07-14
要在Vue中使用Element UI实现一个带有下拉选择的树控件的表单输入框，你可以使用`el-form`和`el-select`组件结合使用。 首先，你需要在Vue组件的模板中添加`el-form-item`和`el-select`组件，并将它们绑定到数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值