element ui多选框(Checkbox 多选框、Select多选框)编辑时无法选中的解决办法
作者:mmseoamin日期:2023-12-14

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

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

 
 
   
	
  

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

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

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

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

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

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

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

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

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