j结构
<el-form-item label="版块权限" class="plateBox" prop="checkedCities">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group class="plate" v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(city,index) in cities" :label="city" :key="city.sectionCode+index">{{city.sectionName}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
js
//全选
handleCheckAllChange(val) {
this.checkedCities = val ? this.cities : [];
this.isIndeterminate = false;
this.dialogForm.sectionCodeAndName=this.checkedCities;//全选数据
},
//多选
handleCheckedCitiesChange(value) {
console.log(value);
//组装多选的数据
if(value.length>0){
this.dialogForm.sectionCodeAndName=[];
for( let i=0; i<value.length; i++){
this.dialogForm.sectionCodeAndName.push({
sectionCode:value[i].sectionCode,
sectionName:value[i].sectionName
});
}
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}else{
this.isIndeterminate=false
this.checkAll=false
}
},
3.每次点击添加的时候清空弹窗的上一次数据
// 关闭新增/修改版块对话框
closeDialog() {
this.isIndeterminate=false;//清空全选的数据(注意,这个花费了我2小时,方向找错了,一直在全选的方法里面找问题,结构是没有清空弹窗的问题)
this.checkAll=false;//清空全选的数据
this.$refs.dialogForm.resetFields();
this.dialogVisible = false;
this.checkedCities=[];//取消时清空选中的数据
this.dialogForm = {
userInfo:'',//工号/姓名
approveStaffCode:'',
approveStaffName:'',//姓名
approveOrgName:'',//部门
approveOrgCode:'',
sectionCodeAndName:[],//版块
};
this.$nextTick(() => {
this.$refs.dialogForm.clearValidate();
});
}
网友评论