el-select 添加 multiple 属性,下拉多选,赋值后点不动

最新推荐文章于 2025-07-02 18:07:49 发布
原创 最新推荐文章于 2025-07-02 18:07:49 发布 · 9.2k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍在使用Element UI框架时，遇到el-select下拉多选组件赋值后无法点击的问题及解决方案。通过使用Vue的this.$set方法，正确实现双向绑定，解决多选组件的值更新后无法交互的bug。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用 element 框架时遇到的坑, el-select  下拉多选,赋值后就点不动了.

在网上找了一些答案,发现是 双向绑定出了问题.

于是 把 原来赋值的方式. 

this.selectVal = [1,2,3]  //[1,2,3]是新值

改为

this.$set( this,'selectVal',[1,2,3] )

就解决了.

vue multiple el-select多选框勾选后无响应
liao_sp的博客
03-30 1518
vue multiple el-select勾选后无响应，用强制更新视图方法 $forceUpdate vm.$forceUpdate() 使Vue实例重新渲染
el-select中多选回显数据后没法重新选择和更改
疑问 搜索 动手 解决 记录
03-02 1万+
<el-select v-model="list" filterable multiple @change="$forceUpdate()"></el-select> 标签里加个@change="$forceUpdate()" 就好了
ElementUI el-select多选下拉框，回显数据后无法重新选择和修改
最新发布
Gzzz的博客
07-02 464
摘要：ElementUI el-select多选下拉框回显后无法修改的问题，可通过两种方案解决。方案一建议在select组件添加@change="$forceUpdate()"，但可能因数据层次复杂失效。更有效的方案二采用this.$set方法赋值，确保数据响应式更新。具体操作为：将原push赋值方式改为先用临时数组收集数据，再通过this.$set(this.form,'sourceOrg',as)设置，从而解决下拉框无法交互的问题。
el-select下拉框多选项勾选后无响应
weixin_44694172的博客
03-21 1323
于是试了下用强制更新视图方法.forceUpdatevm.forceUpdate() 使Vue实例重新渲染后正常。操作复现：路由跳转后，根据路由参数判断赋值后发现下拉框无响应，刷新页面后操作没问题，似乎没有刷新过来？记录一下：在Vue 中使用el-select时选择后无响应，其他表单都能操作！这种问题大家是遇到就长记性了😒。
【element-ui】el-select multiple多选，表单校验问题解决方法
小墨鱼的前端问题录
02-28 3668
在项目开发过程中发现，el-select设置了multiple支持多选属性之后，el-select赋值之后，表单校验不通过。、prop属性、rules校验是否正确，这里注意el-select的rules校验的trigger应该是change。注意rule中验证方式应该是“change” @change="vulTypeChange()"如果以上都没问题，那么还有一个原因就是：嵌套太深，导致form检测不到ruleForm的变化。1、添加form表单:rule方式验证，并且给下拉框添加change函数。
ElementUI中的el-select中multiple多选回显数据后没法编辑
程序员二胖
09-01 4222
场景：在编辑数据时，使用v-model绑定 el-select多选，但无法进行编辑、删除，这是因为由于一些嵌套特别深的数据，导致数据更新了，但是页面却没有重新渲染，需要使用this.$forceUpdate()迫使 Vue 实例重新渲染。在el-select 中使用@change="$forceUpdate()" <el-select v-model="formData.tagsArray" placeholder="请选择标签" multiple clearable :style="{width:
element ui select multiple 多选数据修改回显失灵问题的解决
m0_73089846的博客
06-20 1502
使用change方法，this.$forceUpdate() 重新渲染。
el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组，但要以字符串传递
qq_69775429的博客
02-29 742
查看详情时，将字符串转化为数组时使用split()方法，三目运算符判断是否有值，如果有进行截取，没有赋值为空数组。
el-select数据过多懒加载的解决(loadmore)
10-16
在前端开发中，使用el-select组件来实现下拉选择功能是相当普遍的。不过，在处理大量数据时，若直接渲染所有数据项，会导致el-select组件的渲染性能下降，甚至可能导致界面卡顿。为了解决这一问题，可以通过实现懒...
用el-select 和el-tree写一个下拉多选树状图 可以回显
05-23
通过 `el-select` 和 `el-tree` 组件实现了下拉多选树状图，并且可以回显已选中的值。其中，`el-select` 用于显示选中的值，`el-tree` 用于显示树状图和实现多选功能。 在 `el-tree` 的 `check-change` 事件中，...
element-ui 中 el-select基础多选组件选择后不会自动关闭
u010306287的博客
06-12 6910
element-ui 中 el-select基础多选组件选择后不会自动关闭el-select mutiple组件下拉框选择后不会自动关闭 el-select mutiple组件下拉框选择后不会自动关闭 使用setTimeout + blur() 方法 <el-select v-model="value1" ref="selectAppType" multiple placeholder="请选择"> <el-option v-for="item in option
vue elementui中，el-select多选下拉列表中，获取:value和:label的值
qq_37916164的博客
12-01 3003
<el-form-item label="加工工艺："> <el-select placeholder="请选择加工工艺" multiple style="width:100%" v-model="queryParams.craftId" size="mini" @change="processingTechnicSelect"> <el-.
vue的select下拉框多选项-multiple属性
热门推荐
祈澈菇凉
09-01 2万+
最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。 这里记录一下开发过程中遇到的一些功能。 资料相关 vue-element-admin 推荐指数：star:55k Github 地址：https://github.com/PanJiaChen/vue-el...
ElementUI el-select 选项无法选择的问题
千里之行，始于足下！
01-04 1万+
一、问题描述：今天测试反馈了一个bug：修改用户操作面板上，点击多选的下拉选择框（el-select）弹出面板–>点击选中或取消选中其中的选择项—>点击无反应 <el-dialog title="修改用户" :visible.sync="open" width="600px" append-to-body> .... <el-form-item label="企业可见权限" prop="clientUnitIds"> <el-sele
element-ui el-select 多选单选切换报错问题
kyoog的博客
09-12 1万+
项目需求 后台表单是前台自建的 控件自然也要自建 自然就有各种选项 其中选择框 就有单选多选选项 项目使用的element-ui 自然就用的el-select 由于数据库并没有类似数组的字段 选择框使用varchar 而el-select多选时却需要使用数组 所以在编辑时 需要将值转成数组再赋值给el-select的value  &lt;template&gt; &lt;el-se...
el-select的multiple属性从false切换为true时页面值不清空
weixin_43965251的博客
06-17 490
el-select页面值清空失败
element el-select multiple 回显时 删除 添加无效问题
u012174809的专栏
12-07 1547
这个问题，我没百度时，浪费了几十分钟，百度后，30秒搞定，有问题没头绪还是先百度呀。 <el-select v-model="ruleForm.tagList" :multiple="true" :clearable="true" style="width:100%" @change="$forceUpdate()"
el-select 的multiple属性从false切换为true时页面值不清空
weixin_45714898的博客
05-17 2131
el-select 的multiple属性从false切换为true时页面值不清空 el-select的multiple初始值设置为false单选 选中性别 点击按钮切换multiple为true，选择框的值selectValue设置为[]，但是页面上选择框的值并没有清空 解决办法，先把selectValue置为undefined, 再在nextTick里面切换multiple为true，把selectValue设置为[] 代码： <!-- 选择框 -->
element el-select下拉框选择失效
敲代码无敌小奶龙的博客
01-11 7091
element el-select下拉框选择失效
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值