element—UI select选择器多选框，数据回显后不能修改值

最新推荐文章于 2024-04-07 21:42:38 发布
最新推荐文章于 2024-04-07 21:42:38 发布
阅读量2.5k 收藏 8
点赞数 5
CC 4.0 BY-SA版权
分类专栏： element_ui 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38181746/article/details/109779166
博客主要围绕Vue中select选择器多选框展开。在编辑时给v-model绑定数组可实现数据回显，但无法再次修改下拉框内容。原因是采用若依数据字典循环取值，数据层次多致render函数未自动更新，使用@change=\$forceUpdate()\可解决此问题。

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

使用场景

select选择器多选框，数据回显后不能修改值

上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。
但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。
在这里插入图片描述

实现

原因：这里的下拉框我采用的是若依的数据字典循环取值，因为数据层次太多，render函数没有自动更新，需手动强制刷新。 @change="$forceUpdate()"

在这里插入图片描述
使用@change="$forceUpdate()" 后下拉框就可以删除原来的，和勾选新的

从子级选择到父级新增时从表格里选择回显，(框架若依（RuoyFast))
Rahman510的博客
08-07 302
从子级选择到父级新增时从表格里选择回显，(框架若依（RuoyFast))
el-select中多选回显数据后没法重新选择和更改
热门推荐
疑问 搜索 动手 解决 记录
03-02 1万+
<el-select v-model="list" filterable multiple @change="$forceUpdate()"></el-select> 标签里加个@change="$forceUpdate()" 就好了
element ui中的select多选回显之后不能正常编辑
sumimg的博客
03-20 1075
由于项目需求，在项目中使用用到了element中的select组件的多选功能（multiple），多选之后保存回显所选内容，从后端会拿到一个数组，然后我把这个数组赋值给前端多选对应的数组，这样多选的数据可以正常显示 问题是回显之后不能正常编辑，点击删除小图标也失效 解决方法采用change事件 在change事件中添加一个VUE本身的$forceUpdate方法进行强制渲染即可使select组件可正常编辑 我是遇到的多选框回写问题 同样解决了 ...
Element-UI中的el-select中多选回显数据后没法重新选择和更改
树尚 的博客
03-02 2667
el-select多选在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。
若依不分离+Thymeleaf select选中多个回显
wang_59881的博客
09-28 1854
编辑回显重点是th:selected=“${selectChannels.contains(channel.id)}”selectChannels是后端返回的已绑定的通道列表，channels是通道列表。表单添加时，select选中多个，编辑表单时，select多选回显
若依多选框
翎墨袅
05-29 1927
<div class="radio-box" th:each="dict : ${@dict.getType('quanxian')}"> <label th:for="${'permissions_' + dict.dictCode}" > <input name="permissions" type="checkbox" th:value="${dict.dictVa
详解关于element级联选择器数据回显问题
10-17
总结来说，解决 Element UI 级联选择器数据回显问题的关键在于： 1. 理解级联选择器的数据结构，包括 `value`、`label` 和子级 `children` 的定义。 2. 在编辑或更新表单时，将后端返回的数据（通常是 ID）转换为...
关于element ui --Select 选择器回显问题
very nice
07-09 8325
关于element ui --Select 选择器回显问题
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...
element-ui中select组件绑定值改变,触发change事件方法
10-18
在使用Vue.js和Element UI开发Web应用时，常常需要用到select组件来进行数据的选择。当select组件的选中项发生变化时，常常需要通过监听change事件来获取新的选中值。本文将详细解析Element UI中select组件绑定值...
ruoyi-vue前端数据字典值引用与回显（列表中回显，多选框回显）
qq3892997的博客
11-08 6013
代码： 2. 编辑页面多选框回显 代码：
若依的多图片上传/回显/保存多图片路径url逗号隔开存数据库,前后端都有,拷贝即用
monicateacat的博客
05-13 7200
总结:大家的业务细节可能不同,实现方法也有多种,如果使用若依框架,本身就已经封装了很多方法,多用其封装好的方法是最方便的,2.上传方法,重中之重,参数和返回值自己要明确自己要什么,再根据实际情况修改逻辑,方法走不通多添加log 前台打印找问题。这篇文章涵盖前后端,大家仅需对业务细节进行修改即可,本身图片上传也是个公用功能,所以大多数情况下直接拷贝即可用。4.浏览/回显方法,添加过滤,防止出现错误url导致出现"加载失败"的走马灯图片。后端controller,因为我返回的是绝对路径,若依有获取路径的方法.
若依：编辑/修改页面的下拉框的回显
xyhxuyonghao的博客
10-27 2887
若依：编辑/修改页面的下拉框的回显
若依thymeleaf回显复选框选中项(只修改一行前端代码即可)
致力于互联网、物联网领域知识内容分享
05-04 3849
若依thymeleaf回显复选框选中项演示以及实现方法1.演示图片2. 实现方法3. 详解4.思路来源5.经验总结 演示以及实现方法 1.演示图片 2. 实现方法 下面展示一些 实现代码，th:xxx是thymeleaf的相关语法，@dict是若依框架自己封装的服务类。重点是th:checked属性的值，需要改变的是一号位置和二号位置的值，#strings.arraySplit(x,y)方法是将...
若依框架---前端通过字典设置值实现下拉框展示数据
星
01-12 1万+
1.首先在若依框架的字典管理菜单中添加字典 2.在添加字典的key,value 3.这样就可以在前端需要调用的位置随意调用 <el-form-item label="班次"> <el-select v-model="form.banci"> <el-option v-for="dict in dict.type.sys_banci" :key="dict.valu
关于若依框架树形下拉结构数据的问题
qq_64180379的博客
08-18 2484
关于若依框架树形下拉结构数据的问题
$forceupdate的妙用
weixin_36450667的博客
08-15 1047
初学前端vue，在项目中遇到的一些莫名其妙的BUG： BUG1： 如图： 在充电桩名称输入内容，但是不显示，手动输入其他选项，才会带出 充电桩名称 内容； 解决方法： 添加：@change="$forceUpdate()" 强制更新！解决问题； <el-form-item label="充电桩名称" prop="equipmentName"> <el-input v-model="formObj.equipmentName" ...
Element UI 问题整理
niuniu2878499107的博客
08-17 555
element ui 问题整理
前端开发之el-select 设置默认值后选项无法切换
最新发布
m0_50207524的博客
04-07 1564
在实际使用过程中发现再给el-select设置默认值之后选项无法进行切换了。
element-ui中的el-select选择器分页后如何回显
07-13
在element-ui中，el-select选择器分页后，要实现回显可以通过以下步骤： 1. 首先，你需要在el-select中设置一个v-model属性来绑定选择的值。例如： ``` <el-select v-model="selectedValue" :options="options"></el-select> ``` 这里的`selectedValue`是一个用于存储选择的值的变量，`options`是一个包含选项数据的数组。 2. 然后，你需要在分页切换时，将选择的值保存下来。你可以监听el-select的change事件，在事件处理函数中将选择的值赋给`selectedValue`。例如： ``` <el-select v-model="selectedValue" @change="handleSelectChange" :options="options"></el-select> ``` ``` methods: { handleSelectChange(value) { this.selectedValue = value; } } ``` 3. 当切换分页后，你需要根据之前保存的选择的值来设置el-select的选中状态。你可以通过给el-select设置一个`value`属性来实现。例如： ``` <el-select v-model="selectedValue" :value="selectedValue" :options="options"></el-select> ``` 这样，当分页切换后，el-select会根据`selectedValue`的值来自动选中对应的选项。 通过以上步骤，你就可以在el-select选择器分页后实现回显功能了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值