Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应

最新推荐文章于 2024-05-16 10:56:06 发布
最新推荐文章于 2024-05-16 10:56:06 发布
阅读量1.9k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZJ15981837003/article/details/124342218
版权

先把后端返回的值获取
如果是字符串需要转换为数组
使用$set方法：用此方法更新视图达到操作同步的效果
this.param 为对象
suit_room_type 为要赋值的对象的属性
row.bind_room_codes ? row.bind_room_codes.split(‘,’) : [] ：为要赋的值

this.$set(this.param, 'suit_room_type', row.bind_room_codes ? row.bind_room_codes.split(',') : [])
爬坑的小白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue下拉框回显并默认选中随机问题
10-18
主要介绍了Vue下拉框回显并默认选中随机问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
VUE 多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应。
weixin_44443380的博客
01-11 775
1、问题分析 下拉框数据是通过回显得到的，因为数据层次太多，render函数没有自动更新，数据更改没有触发render，所以点击时无反应。可以通过手动去刷新实现回显数据增删同步。 2、解决方法 给el-select 绑定@change="handleChange" 方法： handleChange(){ this.$forceUpdate(); }, 3、效果图
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）_el-select 分页(1)
最新发布
fksdskjfzxklzk的博客
05-16 733
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应...
行云的博客
07-29 1933
在点击的过程中监听了的绑定值的变化,也改变了,但是下拉框是没有反应的感觉自己设定的值和element ui触发的绑定值有点不一样在添加的框中选中的值返回的不单单是一个数组还有些其他值,但是自己回显的数据只是一个普通值解决办法:方法一vm.$set当视图自动更新失败时，vue提供了set方法vm.$set(target,propertyName/index,va...
el-select多选回显后再次触发没有反应
sunry的博客
08-10 421
value随便一个字段form.value也可以是value，selestLists返回的数据不需要其他的，只要id,name;查看请求返回的id是code。el-select 多选multiple数据回显成功，但是编辑不了。使用 @change = “$forceUpdate()” 强制刷新视图。created(){}中获取下拉数组。
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
el-select中多选回显数据后没法重新选择和更改
热门推荐
疑问 搜索 动手 解决 记录
03-02 1万+
<el-select v-model="list" filterable multiple @change="$forceUpdate()"></el-select> 标签里加个@change="$forceUpdate()" 就好了
element el-select组件回显数据后不能更新最新选择的数据解决方法
峰会路转的博客
11-27 3405
编辑的时候，这个下拉列表有个默认回显的数据，导致在进行其他项选择的时候，不能立即更新选框的值，查找原因很久，才找到解决方法，费了不少时间，特此记录下 <el-select v-if="paperType == 1" v-model="form.questionTh" placeholder="请选择题号" style="margin-bottom:10px;margin-left:5px;"
iView下拉框有数据点击下拉却不显示下拉选项
weixin_52429122的博客
11-29 210
问题原因：iView组件的z-index值最大为1000，设置的z-index太大导致元素遮盖，所以页面观察不到变化。解决方法：若弹出框使用了定位，并有z-index属性，将z-index属性的数组设置为999以下。问题描述：动态控制一个表单的显示和隐藏，表单下拉框明明有数据但是点击下拉框没有任何选项弹出。
Vue+Element+Select下拉框回显后无法再次选择修改
weixin_44711440的博客
11-30 2326
Vue+Element+Select下拉框回显后无法再次选择修改
element ui选择选择器，框内值选择后不改变
夜轻狂的博客
06-28 757
给el-select上面加@change="$forceUpdate()"刷新一下下拉框，这个也是搜索学习到的，然后整理一下。
VUE(4) : vue-element-admin[4] : 多选下拉框及回显
Lxinccode的博客
08-05 3629
参考 : 【vue】下拉框回显问题（显示数字，实际应该显示中文）_易小花的博客-CSDN博客_vue下拉框回显 vue+element 多选下拉框的传值及回显_Humor_L的博客-CSDN博客_vue多选下拉框回显数据 静态下拉框 动态下拉框 回显 push的字段和标签[:key="item.key"]的key保持一致即可回显...
Element——el-select多选器
拾柒唸的博客
08-28 6904
Element的el-select的多选功能详解
element-ui 中标签el-select选中无反应问题
爱coding的大尾巴的专栏
11-10 2551
el-select标签，如果外部还嵌套循环，点击选中标签无反应，删除也不好使， 原因由于层次太多，导致render函数没有自动更新； 在el-select标签内加入 @change="$forceUpdate()" ，强制刷新视图即可。 ...
el-select下拉框：数据回显后，无法重新选中或修改
m0_63026408的博客
05-22 688
选中后数据不更新，给数据重新添加 this.$set(this.form,"userId",res.data.userId) 依然没有用。
Vue3+ElementUI el-select 下拉框多选，下拉框里回显多选的数据
06-10
在Vue3+ElementUI中，可以通过v-model指令来实现el-select下拉框的多选，同时可以通过设置el-option的selected属性来实现在下拉框中回显多选的数据。 首先，在数据模型中定义一个数组属性来存储多选的值，例如： ```javascript data() { return { selectedValues: [] } } ``` 然后，在el-select中设置v-model为这个数组属性，并将multiple属性设置为true，例如： ```html <el-select v-model="selectedValues" multiple> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 这样，在多选下拉框中选择的值就会被存储在selectedValues数组中，同时el-option的selected属性会被自动设置为true或false，以反映当前选项是否被选中。 如果需要在下拉框中回显已经选中的数据，可以使用v-for指令循环遍历selectedValues数组，然后在el-select中设置v-slot的方式来自定义选项的内容。例如： ```html <el-select v-model="selectedValues" multiple> <template v-for="value in selectedValues"> <el-option :key="value" :label="value" :value="value" :selected="true"> <span>{{ value }}</span> </el-option> </template> </el-select> ``` 这样，selectedValues数组中已经选中的值就会以自定义的方式显示在下拉框中。需要注意的是，为了避免重复，需要为v-for循环的每个元素设置一个唯一的key属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值