赞
踩
- <!--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(',');
重点就是: 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(); //多选框赋值后,强制刷新多选框,否则多选框无法取消或选中
- });
- },
这是我的下拉框定义 (使用数据字典作为下拉框选项,后台赋值后多选框自动选中)
- <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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。