当前位置: 首页 > news >正文

element ui多选框编辑时无法选中的解决办法

 <!--v-model绑定的值必须是[],不能是字符串--><el-form-item label="配布对象" prop="reptGroupArray" > <!--多选--><el-checkbox-group v-model="form.reptGroupArray" size="small" @change="checkedBoxChange"> <el-checkbox-button v-for="dept in deptMap" :key="dept.deptName" :label="dept.deptName" ></el-checkbox-button></el-checkbox-group>
</el-form-item>

 在上面添加变更事件,然后变更事件中添加this.$forceUpdate();  强制渲染多选框的样式即可

checkedBoxChange(){//console.log("多选框实时变化:" + this.form.reptGroupArray);this.$forceUpdate();  //强制渲染多选框样式,否则值变了样式没有选中
},

注意: 多选框需要传数组,字符串无法正常渲染,因此表单初始化绑定的v-model需要初始化为空数组[],而编辑页面传值时如果是字符串,需要转数组:

this.form.reptGroupArray = this.form.reptGroup.split(','); 

http://www.lryc.cn/news/218375.html

相关文章:

  • Android Studio布局
  • 2.10 CSS BFC
  • iSlide2024一款基于PPT的插件工具包含38个设计辅助功能
  • ATE新能源汽车充电桩自动负载测试系统
  • 机器学习笔记 - 感知器的数学表达
  • JavaScript 自定义对象
  • UNI-APP_ios自动适应底部安全区背景,修改安全区背景
  • 微服务的定义
  • 什么是C语言中的异常和错误处理机制?
  • 某某盾-滑块验证-自动获取validate值-(逆向js+python)
  • C++:set和map的使用
  • 同城售后系统退款业务重构心得 | 京东云技术团队
  • 【计算机网络笔记】TCP连接管理(图解三次握手和四次挥手)
  • C++ 初阶 类和对象(中)
  • 【漏洞复现】Metinfo5.0.4任意文件包含漏洞复现
  • 【计算机网络实验/wireshark】tcp建立和释放
  • STM32:I²C通信原理概要
  • 【开题报告】基于 Spring Boot 的在线预约导游系统的设计与实现
  • 如何使用ps制作ico图标文件
  • 【Linux】logrotate实现“日志文件定时分割“
  • Android可绘制资源概览(背景、图形等)
  • 力扣2095.删除链表的中间节点(java快慢指针)
  • 【Vue-Element-Admin】table添加自定义索引
  • 0008Java安卓程序设计-ssm基于Android平台的健康管理系统
  • Mac 禁用一些高占用cup的进程
  • layui form表单 调整 label 宽度
  • 轻量封装WebGPU渲染系统示例<12>- 基础3D对象实体(源码)
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决
  • 【PY】倒计时日历
  • windows mysql安装