element ui中的select多选回显之后不能正常编辑

最新推荐文章于 2024-05-21 16:24:56 发布
最新推荐文章于 2024-05-21 16:24:56 发布
阅读量1k 收藏 3
点赞数 4
原文链接：https://segmentfault.com/a/1190000019596502
版权

由于项目需求，在项目中使用用到了element中的select组件的多选功能（multiple），多选之后保存回显所选内容，从后端会拿到一个数组，然后我把这个数组赋值给前端多选对应的数组，这样多选的数据可以正常显示
在这里插入图片描述
问题是回显之后不能正常编辑，点击删除小图标也失效
解决方法采用change事件
在这里插入图片描述
在change事件中添加一个VUE本身的$forceUpdate方法进行强制渲染即可使select组件可正常编辑
在这里插入图片描述
我是遇到的多选框回写问题 同样解决了

春风姐姐
关注
element 下拉框单选转多选回显不清空
qq_47904525的博客
09-16 901
当分析方法改变成其他选项时，输入名称需要变成相应的单选或者多选并且清空 条件就是当分析方法的的code为4时是单选，其他时候都是多选 现在分析方法从code=4切换到code=3，但是输入名称没有回显还是有 尝试了用this.$set(),然后debugger，输入清空了，但是页面还是没有清空，并且已经有了非空校验，然后又用this.$forceUpdate(),oh my gad,强刷都不得行 解决方法：在输入名称那儿加一个标识符，v-if=“isAnalyseCode” ...
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下： HTML代码： 1.在处理人列加入一个下拉框模板，其中v-model必须要scope.row.proJbruserValue来绑定，意思是这个值绑定到当前行所选中的人；如果直接绑定proJbruserValue，将不能进行差异化选择，(这里scope
select下拉框可编辑输入框
12-31
select下拉框可编辑输入框 select下拉框可编辑输入框 select下拉框可编辑输入框
ElementUI中的el-select中multiple多选回显数据后没法编辑
程序员二胖
09-01 4148
场景：在编辑数据时，使用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选择器多选框，数据回显后不能修改值
qq_38181746的博客
11-18 2484
使用场景 select选择器多选框，数据回显后不能修改值 上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。 但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。 实现 原因：这里的下拉框我采用的是若依的数据字典循环取值，因为数据层次太多，render函数没有自动更新，需手动强制刷新。 @change="$forceUpdate()" 使用@change="$forceUpdate()" 后下拉框就可以删除原来的，和勾选新的 ...
vue3+element-plus 表单输入框无法输入、下拉框值不回显
qing_xing_的博客
07-11 2456
因为element-plus表单的ref和model的值不能设置相同的值，如果设置成相同的值，输入框无法输入、下拉框值不回显在element-plus的官方文档中是这样写的，可以看出来两者的值不一样 而在vue2+饿了么中是可以设置相同的值，官方写法如下...
vue element ui el-select控件初始值不能编辑问题
u012558074的博客
02-18 1624
1、首先在绑定值得时候须要设置默认初始值 比如在data中定义对象 <el-select v-model="model.a"> <script> export default { data() { return { //model:{} //错误，须要给a设置默认值 model:{a:1} //错误，须要给a设置默认值 } } </script> 2、如果上面的值不起作用，则可以在input(文本框) 或者
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
element的select多选回显
06-28
Element的select多选回显主要有以下几种方式： 1. 使用v-model双向绑定数据 首先，在select组件标签上使用v-model指令进行双向绑定，将选择的选项绑定在一个数组中。例如： ``` <el-select v-model=...
详解关于element级联选择器数据回显问题
12-29
element级联选择器数据回显问题 对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。 表单部分代码： 部门名称： prop=deptId> 请选择部门 props=depShowType options=deptData v-model=...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
el-select实现el-option可编辑
csdnyp的博客
07-20 1760
核心代码如下，注意el-input不要使用@focus，会导致el-select面板收起来；使用@click.native.stop即可。点击编辑图标对选择项进行修改。鼠标悬浮出现编辑图标。
el-select既能选择又能输入，并且再次点击时能接着编辑
weixin_43979556的博客
04-29 3157
1）el-select添加filterable和之后可以输入内容；2）再次输入时会将原来的内容变成提示，用户体验不好，因此需要找到办法将值重新赋给内部的input输入框，此处采用的方式将值重新赋给input输入框。3）使用之后可以确保按Enter键时能将内容输入，但是用户体验不好，因此使用方式将input输入框中的值实时赋值给绑定值select，用完记得在beforeDestroy()中移除监听。
vue el-select 既可以下拉选择 也可以手动编辑
lixiaohua66的博客
03-18 6361
转载于：https://blog.csdn.net/sunshineTing2/article/details/108978675
el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏
qq_44716001的博客
07-04 1789
【代码】el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏。
el-select 可输入，可选择
qq_51389137的博客
01-29 1445
【代码】el-select 可输入，可选择。
el-select可新增输入，可选择
NIKCFNIF_66666的博客
07-15 8124
最近在做一个功能，客户提出既可以下拉选择名称，也可以自己输入名称。用的el-select自带属性实现，但是需要点击回车才可以实现输入，弄了挺久才想到@input.native事件，通过input事件来赋值，很好的实现了可选择，可输入。1，通过filterable筛选属性，来实现可输入的下拉框。2.失去焦点给输入框赋值。......
el-select可选择可搜索可输入新内容
最新发布
请叫我欧皇！的博客
05-21 3001
需求：el-form-item添加el-select，并且el-select可选择可搜索可输入新内容，并且和其他的el-input做联动，如果是选择，那么el-input自动回填数据并且不可编辑，如果el-select输入新的内容，那么el-input也要输入新内容。实现功能。
el-select 可选择/可输入，自定义搜索方法
weixin_42255542的博客
11-01 4694
el-select 可选择/可输入，自定义搜索方法
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值