elementUI的el-select 默认值显示value不显示label问题

最新推荐文章于 2024-08-13 14:10:55 发布
最新推荐文章于 2024-08-13 14:10:55 发布
阅读量1.2w 收藏 7
点赞数 5
文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46179609/article/details/104554859
版权
在Vue的编辑页面使用el-select组件时，遇到选框显示默认值只显示value而不显示对应的label。问题在于返回的数据value为Number类型，而el-option中的value需要的是String类型。解决方案是将数据中的value转换为String类型，以匹配el-option的预期，从而正确显示label。
摘要由CSDN通过智能技术生成

el-select 默认值显示value不显示label问题

在做编辑页面时
需要取到列表项数据回显默认值
在做select回显的时候遇到了这个问题

明明拿到的值和value中的值一样
但是就是不转换成label
这种情况一般出现在value为数字的情况
问题
如图所示
在这里插入图片描述

原因是

返回的数字和el-option选框里value值的类型对应不上
一个是 Numer 一个是 String
解决后如图
在这里插入图片描述解决办法
既然el-option选框需要的value属性是String类型的,可以利用row这个一行数据,拿到el-option选框的value将其转换为String类型就可以了

//显示编辑界面
			handleEdit: function (index, row)
最低0.47元/天 解锁文章
菜鸡涛
关注
el-option显示value而不是lable的问题
Cc
04-21 2055
el-option显示value而不是lable的问题，后台返回数字前端想要显示文字
element-ui的el-select不显示value对应的label值
zp0926的博客
05-28 2107
显示效果如下： 期望效果如下： 调试发现： 是value的格式存在问题，读取到的数据和字段返回的数据类型不一致所导致的。 我存的字段是一个省份的字符串ID数组（11，22，33，44，55）格式，进行切割后得到的是字符串，而后台返回的集合中value是long类型的数组，由于得到的数据类型对应不上表单操作的数据类型，进行相应转换即可。 <el-form-item label="可销售省份" prop="areaIds"> <el-sel
el-select 默认选中值
最新发布
前端小菜鸟也有人起的博客
08-13 362
el-select 默认选中值
el-select 中v-model绑定值，数据回显只显示value，不显示label
m0_64931981的博客
10-08 1028
如果这样写选择框显示的是0而不是上架，这种情况比较常见，原因是他们的数据类型不一致，这个时候统一数据类型就会显示对应的上架了。以下列出我遇到过的问题，代码如下所示。
select获取下拉框的值 下拉框默认选中
热门推荐
wh09091的博客
06-21 18万+
获取select的值,默认选中制定select值
ElementUI 的 el-select 设置值后显示value而不是label
season_hai
03-03 8462
问题:ElementUI 的 el-select 设置值后显示value而不是label 关键是这里: <el-optionlabel="在职"value="1"></el-option> 查了下百度 主要是value值的格式不一样, 我的form.state是数字, 也就是Number类型 而value="1" 表示value是字符串类型(原生HTML默认字符串类型) 要想改成数字类型 应改成 v-bind:value="1" 这时1代表的是数字类型而...
element踩坑记录：select下拉框回显不能切换及回显不显示label，显示value值
Kingyolo的博客
10-12 2240
1、select下拉框回显不能切换 这个问题是render不能刷新造成的 <el-form-item label="所属用户"> <el-select v-model="form.userId" placeholder="请选择" @change="handleSelectChange"> <el-option v-for="dict in userList" :key="dict.userId"
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
解决el-select选择器无法显示选中内容的问题，可以考虑以下几个方面： 1. v-model绑定的正确性：确保el-select的v-model指令正确地绑定了一个模型属性，并且该属性能够响应数据变化。在Vue.js中，v-model本质上是...
详解element-ui中el-select的默认选择项问题
10-16
需要注意的是，如果`v-model`的值不在`el-option`的`value`集合中，`el-select`将不会显示任何选项，因为没有匹配的值。为了避免这种情况，我们需要确保所有可能的默认值都存在于`options`中。 此外，`el-select`...
vue elementUI el-select 多选 同时获取label 和 value 的值【记录】
小学僧的学习笔记
03-11 2569
<el-form-item label="使用者IP地址" prop="ip_addresses" :rules="[ { type: 'array', required: true, message: '不能为空', trigger: ['blur', 'change'] } ]" > <el-select v-model="ip_address" multiple placeholder="请选择IP地址" style="width: 10
element ui el-select给默认值（code/value），不显示对应的文字（lable）
小白正在变黑
12-11 1024
el-select的回显问题，可能是数据类型导致
el-select 数据回显，只显示value不显示lable
程邓楠的博客
09-06 3017
主页面 点击actions，把当前VIPGrade ID传过去 这个时候我们可以看到，select List是有数据的，但是为什么只显示value，并没有显示label呢？ 这个时候我们打印一下，从主页面传入的 id 是什么类型，再看一下我们的 list 里面的id是什么类型 通过控制台我们可以看到，主页面传入的id 是String类型的，而我们 list 的 VIPGradeid 是Bumber类型的，看到这里我们就知道原因了； 我们在数据回显 重置的我们 VI...
el-select 默认值显示value不显示label问题
weixin_34403976的博客
09-27 9382
el-select 默认值显示value不显示label问题 在做编辑页面时 需要取到列表项数据回显默认值 在做select回显的时候遇到了这个问题 明明拿到的值和value中的值一样 但是就是不转换成label 这种情况一般出现在value为数字的情况 原因是 返回的数字和el-option选框里value值的类型对应不上 一个是 Numer 一个是 String 所以就不转换了 检查一下统一类...
elementui select 赋值后，回显没有默认选中label，而是显示value值
凉城玖的博客
02-25 4929
bug示意图： 给 select 赋值，select 展示的却是value的数据, 不是我们想看到 label 对应的数据，而且在下方的选择列表中并没有选中传递过来的数据 这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。 比如： 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ，回显就是自己主动给这个 v-model 赋值，如果你给这个 v-
elementUI el-select 选择了label却显示value的值
InterestAndFun的博客
11-10 3688
在实际项目开发中出现了选择label却显示value的情况 百度上搜索了一圈，全都是说value的数据类型问题，把我带偏了。折腾了半天我才转过来，会不会就是label的问题。 我原本习惯都写上span {{lable}}然后放入label的值（当年没用elementUI开发留下来的习惯，得改），按道理来说一注掉，显示的应该还是label的值，而不是value的值。但是显示的偏偏就是value的值，那就是问题所在了，我的label输入导入有问题。 详细检查数据接口获取的数据都没问题，我又陷入了沉思，无意之
el-select、el-select-v2默认值显示value不显示label的问题
qq_36076928的博客
08-09 2300
el-select、el-select-v2默认值显示value不显示label的问题
el-select 默认值
07-14
el-select 的默认值可以通过设置 v-model 绑定的值来实现。例如，如果你想让 el-select 的默认值为 "apple"，你可以这样设置： ```html <template> <div> <el-select v-model="selectedFruit"> <el-option label="Apple" value="apple"></el-option> <el-option label="Banana" value="banana"></el-option> <el-option label="Orange" value="orange"></el-option> </el-select> </div> </template> <script> export default { data() { return { selectedFruit: 'apple' } } } </script> ``` 这样，当 el-select 第一次被渲染时，它会自动选择 "Apple" 这个选项作为默认值。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值