el-select 数据回显，只显示value不显示lable

最新推荐文章于 2024-07-24 09:35:06 发布
最新推荐文章于 2024-07-24 09:35:06 发布
阅读量3k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56650035/article/details/120130615
版权

javascript vue.js elementui

主页面

 点击actions，把当前VIPGrade ID传过去

 这个时候我们可以看到，select List是有数据的，但是为什么只显示value，并没有显示label呢？

 

 这个时候我们打印一下，从主页面传入的 id 是什么类型，再看一下我们的 list 里面的id是什么类型

 

 通过控制台我们可以看到，主页面传入的id 是String类型的，而我们 list 的 VIPGraded 是Number类型的，看到这里我们就知道原因了；

 我们在数据回显 重置的我们 VIPGradeID 的时候，把类型转换一个即可

再看效果图

 此时我们已经看到，数据回显时，就可以绑定上对应的 ID 值，并且显示对应的Label 值；

Iam_楠
关注
ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示
BADAO_LIUMANG_QIZHI的博客
08-06 3386
场景 Vue+ElementUI+axios+SpringBoot前后端分离的后台管理系统。 将表格中某字段类似于状态等需要关联字典表进行筛选查询时。示例如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先实现前端页面下拉框赋值 在页面上添加一个el-table <el-form-item label="调动类别" prop="...
Element Select选择器绑定对象，多选，回显处理
crazybai0001的博客
10-28 1万+
有些时候Select选择器需要多选、绑定对象，用户选择某项后（change事件），得到的值是一个对象，得到对象后可以获取对象的某些属性，以便做进一步处理，数据提交入库后，进行编辑操作，此时根据需求可能还需要正确定回显之前新建时选择的多个列表项，本文对些功能实现做简单整理、解释。
elementUI的el-select 默认值显示value不显示label问题
菜鸡涛的博客
02-28 1万+
el-select 默认值显示value不显示label问题 在做编辑页面时 需要取到列表项数据回显默认值 在做select回显的时候遇到了这个问题 明明拿到的值和value中的值一样 但是就是不转换成label 这种情况一般出现在value为数字的情况 问题 如图所示 原因是 返回的数字和el-option选框里value值的类型对应不上 一个是 Numer 一个是 String 解决后如图 ...
el-select的使用、根据后台返回的value显示对应label值
qiuqiu1894的博客
10-07 1万+
** 1.el-select的使用 ** 模板： <div class="group-brank"> <label class="col-30"><span style='color:red'>*</span>难度系数</label> <template> <el-select v-model="diff...
element ui中select选择框默认赋值有时出现value，没有实现label原因
最新发布
wwll177的博客
07-24 368
可能的原因:1、赋值类型不对，例如key值是String类型，赋值了Number类型。
el-select下拉框只回显value不回显label的原因以及解决方法
m0_63026408的博客
11-16 5967
3：如果 value类型是正确的，下拉框数据也有，还是返显的value，最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下。el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，将value转换成对应的类型即可。2：如果转换了正确的类型还是返显value而不是label，那么有可能时因为下拉框的数据没有请求出来，因此没有返显相对应的label，
select中value、text的赋值、回显（修改的时候会用到）
OnePiece
11-20 3686
var sel = document.getElementById('productType21'); sel.options[sel.options.length] = new Option(select.xtype,select.xtypeId); 下拉框回显  修改时 var sel = $("#tuijian1")[0];// 大类 $("#tuijian1").f
element ui l-select 显示value不显示label问题
fenghuashao的博客
05-27 1570
el-select下拉列表显示value不显示label问题 在做编辑页面时 需要取到列表项数据回显默认值 在做select回显的时候遇到了这个问题 明明拿到的值和value中的值一样 但是就是不转换成label 这种情况一般出现在value为数字的情况 数字转换成字符串即可 ...
el-option显示value而不是lable的问题
Cc
04-21 2045
el-option显示value而不是lable的问题，后台返回数字前端想要显示文字
el-select初始化显示value点击能看到label的问题处理
weixin_45353536的博客
06-09 660
个人总结
【Vue】el-select 数据回显，只显示value不显示lable：
SunPeng的博客
07-18 4811
【Vue】el-select 数据回显，只显示value不显示lable：，数据类型不一致导致的，可以typeof判断数据类型（其中一个为数字Number，另一个为字符串String）， 需求： 两个不同页面，其中一个页面的select改变会引起另一个页面的select的改变（其中获取到的是id） 问题： 另一个页面获取展示的是id，而不是想要的对应文字 解决： JSON.stringify() JSON.parse()...
ElementUI Select选择器如何根据value值显示对应的label
WuwuwuH_的博客
07-27 2813
Select选择器根据value显示对应label
vue element-ui el-select 控件 显示value 而不显示 label的解决办法
souwer的博客
11-30 1367
vue element-ui el-select 控件，显示value而不显示label的解决办法
关于el-select值的回显问题 : 框内显示label值还是value值
热门推荐
wlong
11-11 2万+
今天写前端页面的时候突然遇见了这么个问题： 我想实现一个下拉框，于是使用了el-select标签 <el-col :span="12"> <el-form-item label="中午吃啥" prop="lunch"> <el-select v-model="wlong.lunch" placeholder="中午吃啥" size="small"> <el-option v-for="(t...
select下拉框回显
eRunn
02-24 9198
 回显时总是某一特定的选项，只需将回显时select的value设置成对应值就可以回显，例如下面例子我给select的value值设置为3，对应选项就是ccc。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
element-ui的el-select如何回显value对应的label值
大桶爆米花eee
02-27 6946
现在的问题是不显示label，只显示value值 原因是value的格式存在问题，数据库读取到的value数据类型不一定为number或string类型 需要自己转换成相同的类型 总结： 显示不正常 多数是由于得到的数据类型对应不上表单操作的数据类型 进行相应转换即可 即：option的value值如果为number，保存后从后台拿到的值需要转为number类型；如果为string，则需要转为st...
select 赋值、回显值
大自然界的一颗沙子，它磨练久了会变成珍珠的。
07-21 1837
总结： 1、同一个界面若包含新增、修改，若select的id、name都一样， 通过jquery赋值，会出现只赋值一个的现象，优先赋值第一个，所以需要更改成不同的id、name。 2、默认选中设置 $('#serviceType option:eq(1)').attr('selected','selected');//设置的几个选中 $("#serviceType").val("111")...
el-select 下拉框选择后获取label值，用value返回list对象数组中的对应的label
11-25 1501
el-select 下拉框选择后获取label值，用value返回ist对象数组中的对应的label。
el-form-item 嵌套el-select数据回显不正常
05-22
当el-select嵌套在el-form-item中时，数据回显可能会出现问题，这通常是因为v-model绑定值的问题。如果v-model绑定的值为一个对象，而该对象是在el-select组件中被赋值的，则可能会导致数据回显不正常。解决方法是将v-model绑定的值更改为一个普通的变量，而不是一个对象。 例如，如果你的代码如下： ``` <el-form-item label="Select"> <el-select v-model="form.select"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> ``` 其中，v-model绑定的值为form.select，如果form是一个对象，那么可能会导致数据回显不正常。解决方法是将form.select更改为一个普通的变量，例如： ``` <el-form-item label="Select"> <el-select v-model="select"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> ``` 这样就可以正常回显数据了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Iam_楠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值