• element ui多选框(Checkbox 多选框、Select多选框)编辑时无法选中的解决办法


    1. Checkbox 多选框无法选中的解决办法:

    1. <el-form-item label="配布对象" prop="reptGroupArray" >
    2. <el-checkbox-group v-model="form.reptGroupArray" size="small" @change="checkedBoxChange">
    3. <el-checkbox-button v-for="dept in deptMap" :key="dept.deptName" :label="dept.deptName" >el-checkbox-button>
    4. el-checkbox-group>
    5. el-form-item>

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

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

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

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

    2. Select多选框无法选中的解决办法:

            重点就是: this.$forceUpdate();  强制刷新,多选框的小bug,经常不强制刷新就渲染失败,导致要么无法选中,要么无法取消选中

    1. /** 修改按钮操作 */
    2. handleUpdate(row) {
    3. this.reset(); //初始化表单
    4. getDataById(row.id).then(response => { //后台根据id获取数据
    5. this.form = response.data; //返回的实体赋值给form表单
    6. this.form.releaseType = this.form.remark.split(","); //把字符串根据逗号分割成数组
    7. this.$forceUpdate(); //多选框赋值后,强制刷新多选框,否则多选框无法取消或选中
    8. });
    9. },

     这是我的下拉框定义 (使用数据字典作为下拉框选项,后台赋值后多选框自动选中)

    1. <el-form-item label="发布类型" prop="releaseType">
    2. <el-select v-model="form.releaseType" placeholder="请先选择发布类型" multiple @change="checkedBoxChange">
    3. <el-option v-for="dict in dict.type.sys_release_type" :key="dict.value" :label="dict.label" :value="dict.value">el-option>
    4. el-select>
    5. el-form-item>

  • 相关阅读:
    C#WPF嵌套布局实例
    深入剖析:如何使用Pulsar和Arthas高效排查消息队列延迟问题
    axios 请求拦截器&响应拦截器与router的导航守卫
    C#泛型
    嵌入式学习笔记(1)基本知识、C语言常用关键字、OLED
    2023.10.5 文件操作IO 经典例题
    百亿数据分库分表核心流程详解
    POI入门
    git异常:error: failed to push some refs to
    算法通关村-----原来贪心如此简单
  • 原文地址:https://blog.csdn.net/qq3892997/article/details/134180038