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