解决el-select回显value，不显示lable，以及之后不能操作的问题

最新推荐文章于 2024-06-14 10:39:01 发布
最新推荐文章于 2024-06-14 10:39:01 发布
阅读量585 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45779588/article/details/137632292
版权
该代码片段展示了如何在Vue应用中，通过`this.addData.classifyIds`获取数据并进行处理，创建一个多选下拉框（el-select），其值绑定到`classifyIdsList`，并在用户选择时触发`$forceUpdate()`更新状态。
摘要由CSDN通过智能技术生成


  this.addData = res.data
                   let values = this.addData.classifyIds.split(',')
                    let valueArr = values.map((item) => {
                        return Number(item);
                    });
                    this.addData.classifyIdsList=valueArr


不能操作 加@change="$forceUpdate()"
 <el-select v-model="addData.classifyIdsList" placeholder="请选择" multiple @change="$forceUpdate()">
                                <el-option v-for="item in jinGangList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>

qq_45779588
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决bootstrap-select 动态加载数据不显示的问题
12-01
如下所示： 在使用bootstrap-select 动态加载数据的时候，refresh...以上这篇解决bootstrap-select 动态加载数据不显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
el-select下拉框只回显value不回显label的原因以及解决方法
m0_63026408的博客
11-16 5430
3：如果 value类型是正确的，下拉框数据也有，还是返显的value，最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下。el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，将value转换成对应的类型即可。2：如果转换了正确的类型还是返显value而不是label，那么有可能时因为下拉框的数据没有请求出来，因此没有返显相对应的label，
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 888
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
ElementUI中的el-select中多选回显数据后没法重新选择和更改
coldriversnow的专栏
02-25 3124
场景 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107838848 上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。 但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。 实现 原因 下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新。
关于el-select回显问题 : 框内不显示label，而是value
qq_71214810的博客
11-11 4768
希望大家-成为厉害的大人和更可爱的小孩！很高兴遇见你。
el-select回显数据，解决el-select回显异常 显示option选项的value 而不是显示label
林中明月间丶
04-16 1539
废话：今天在使用el-select回显数据的时候 出现回显option选项的value 而不是显示label的问题。以为是渲染的问题，试了很多方法 入 this.$set() this.$forceUpdate()等等都没有解决。
elementUI的el-select 默认值显示value不显示label问题
galaxyJING的博客
02-23 3332
elementUI的el-select 默认值显示value不显示label问题
vue解决el-select下拉框不显示label问题
weixin_46127011的博客
01-05 2666
最近在开发项目的过程中，遇到了这个问题。el-select的下拉框数据是后端返回的，当点击下拉框选项时会请求后端的接口，当在请求接口的过程中label是有显示的，但是在请求完成后，label就没有显示了。vue无法监听动态新增属性的变化，所以当向后端请求数据完成时，这时对应的v-model绑定的值是响应式的，这时候vue是无法监听到的。注：v-model绑定的值须是object.prop的形式。使用this.$set()方法。
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
vue 解决element-ui中el-select显示value不显示label的问题
热门推荐
weixin_43575792的博客
03-27 1万+
项目场景： 使用element-ui中的el-select，给选择框赋值时显示的值是value不是label 如下图所示，显示内容不是label 石河子大学而是value 1 原因分析： 产生上图的情况一般是由于el-select里面的v-model和v-value参数的类型不同，即下方代码中的form.sid和item.sid的类型不一致， <el-select v-model="form.sid" placeholder="请选择学校" style="width: 100%">
el-select绑定值赋值后，页面无法显示对应label值
weixin_44886911的博客
05-07 2898
el-select绑定值赋值后，页面无法显示对应label值 this.lunwen.achmId＝’1’，页面也显示1，无法显示1对应的label值。这种情况大多数是数据类型不统一，比如页面绑定为number类型，而赋值为string类型，或者页面为string类型，赋值为number类型，只要将数据类型进行转换即可。 但在确定数据类型一致后，页面仍然无法显示label值。 最后发现，是因...
el-select后端返回数据显示value不显示label
weixin_45288172的博客
01-28 1604
需要展示label值，但是输入框中直接展示了后端数据返回的value值。发生这种情况，主要是因为后端返回的value值与option中的value值数据类型不一致导致的。
element-ui的el-select总是不显示label，而是显示value
chpswg的专栏
09-08 941
element-ui的el-select总是不显示label，而是显示value， 这个问题改了无数次，结果发现是没有为el-option赋值label,
vue3中弹框中的el-select下拉组件显示value而不显示label
kanno的博客
10-20 2374
vue3中弹框中的el-select下拉组件显示value而不显示label
el-select选项值不显示lable值，显示value值
weixin_43916677的博客
09-01 893
00
vue如何解决el-select下拉框显示ID不显示label问题
weixin_43923808的博客
12-08 840
后来打印了change事件选中的，发现是Number类型。
el-select回显value值
06-13
要回显 `el-select` 组件的 `value` 值，有两种方法： 1. 使用 `v-model` 指令绑定 `value`，这样选中的值会自动更新到绑定的数据上，例如： ```html <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` ```javascript data() { return { options: [ { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' } ], selectedValue: '' } } ``` 这样选中的值就会自动更新到 `selectedValue` 中，可以在其他地方使用 `selectedValue` 来获取选中的值。 2. 使用 `:value` 绑定 `value` 值，然后监听 `change` 事件，手动更新选中的值，例如： ```html <el-select :value="selectedValue" @change="handleChange" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` ```javascript data() { return { options: [ { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' } ], selectedValue: '' } }, methods: { handleChange(value) { this.selectedValue = value } } ``` 这样选中的值会通过 `change` 事件传递到 `handleChange` 方法中，然后手动更新 `selectedValue`。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值