element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

elementui的多选框选中问题,Ruoyi,vue,vue.js,ruoyi,elementui

 <!--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(',');

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

elementui的多选框选中问题,Ruoyi,vue,vue.js,ruoyi,elementui

重点就是： 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(); //多选框赋值后，强制刷新多选框，否则多选框无法取消或选中
      });
    },

这是我的下拉框定义（使用数据字典作为下拉框选项，后台赋值后多选框自动选中）文章来源地址https://www.toymoban.com/news/detail-753682.html

<el-form-item label="发布类型" prop="releaseType">
     <el-select v-model="form.releaseType" placeholder="请先选择发布类型" multiple  @change="checkedBoxChange">
         <el-option v-for="dict in dict.type.sys_release_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> 
        <!-- 字典类型中的value是字符串，releaseType却是int类型，因此必须Number(dict.value)转换成相同类型，否则编辑时无法选中-->
     </el-select>
</el-form-item>

到了这里，关于element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！