【element-ui】el-checkbox子父级联动勾选
需求：根据已有的项目，点击操作按钮从全部的各项展示中将对应的项目勾选，如图所示：
思路：1、处理已有项目的渲染
{{key}}
{{val._prop.func_name}}
2、处理弹窗内多选框的渲染，这里没有使用el-checkbox-group，分别绑定了单独的el-checkbox
{{key}} 已选{{value.realLength}}个，共{{value.length}}个
{{val.func_name}}
3、根据全选按钮的勾选状态处理子级状态
// 全选全不选
handleCheckAllChange(key,val,e) {
val.forEach(i=>{
i.checked = e;
const code = `${i.func_code}-${i.sys_code}`;
// 全选且去重
if (e==true) {
if (this.funcCode.indexOf(code) == -1) {
this.funcCode.push(code);
}
} else {
while (this.funcCode.indexOf(code) != -1) {
let pos = this.funcCode.indexOf(code);
this.funcCode.splice(pos,1);
}
}
});
// 子级状态
if(e==true){
this.chooseSystem[key].realLength = this.chooseSystem[key].length;
this.chooseSystem[key].isIndeterminate = false;
this.chooseSystem[key].checkAll = true;
} else {
this.chooseSystem[key].realLength = 0;
this.chooseSystem[key].isIndeterminate = false;
this.chooseSystem[key].checkAll = false;
}
},4、根据子级勾选的状态反过来判断全选
// 单个多选框
handleCheckedItemChange(key,value, e) {
let newKey;
if(key == '预统'){
newKey = 'BT';
} else if (key=='报统'){
newKey = "SP";
} else if (key=='薪统'){
newKey = 'SS';
} else if(key == '缴统'){
newKey = 'UP';
} else if(key == '平理'){
newKey = 'UO';
}
const newCode = `${value.func_code}-${newKey}`;
let pos = this.funcCode.indexOf(newCode);
if(e==true && pos<0){
this.funcCode.push(newCode);
}else{
this.funcCode.splice(pos,1);
}
const len = this.chooseSystem[key].length;
let checkedCount = 0;
let unCheckedCount = 0;
for(i=0;i代码片段如下：
data() {
return {
tableData: [], // 视图数据
chooseSystem:{}, // 后台数据包
funcCode:[], // 选中数组
}
},
mounted() {
this.loadFilter();
this.loadFunc();
},
methods: {
// 加载备选功能
loadFilter(sys,callback) {
axios({
method: 'post', url: '',
data: {
ajax: true, act: ''
},
}).then(response => {
let resp = response.data;
if (resp.success) {
const chooseSystem = resp.func_entries;
for(let key in chooseSystem){
if(key=='BT'){
chooseSystem['预统'] = chooseSystem[key];
this.$delete(chooseSystem, key);
} else if(key=='SP'){
chooseSystem['报统'] = chooseSystem[key];
this.$delete(chooseSystem, key);
} else if(key=='SS'){
chooseSystem['薪统'] = chooseSystem[key];
this.$delete(chooseSystem, key);
} else if (key=='UP'){
chooseSystem['缴统'] = chooseSystem[key];
this.$delete(chooseSystem, key);
} else if(key=='UO'){
chooseSystem['平理'] = chooseSystem[key];
this.$delete(chooseSystem, key);
}
}
const sysChosen = sys;
this.chooseSystem = chooseSystem;
// 初始化
for(let key in this.chooseSystem){
this.chooseSystem[key].forEach(item=>{
this.$set(item,"checked",false);
});
this.$set(this.chooseSystem[key], "realLength",0);
this.$set(this.chooseSystem[key], "checkAll",false);
this.$set(this.chooseSystem[key], "isIndeterminate",false);
// 初始化对比赋值
for(let map in sysChosen){
if(key == map){
sysChosen[map].forEach(m=>{
this.funcCode.push(`${m.func_code}-${m.sys_code}`);
this.chooseSystem[key].forEach(k=>{
if(m.func_code == k.func_code){
this.$set(k,"checked",true);
}
})
});
if(sysChosen[map].length >= this.chooseSystem[key].length){
this.$set(this.chooseSystem[key], "checkAll",true);
this.$set(this.chooseSystem[key], "isIndeterminate",false);
} else {
this.$set(this.chooseSystem[key], "checkAll",false);
this.$set(this.chooseSystem[key], "isIndeterminate",true);
}
this.$set(this.chooseSystem[key], "realLength",sysChosen[map].length);
}
}
}
callback && callback();
} else {
// ...
}
}).catch(function (error) {
// ...
});
},
// 加载视图数据
loadGrants(callback) {
this.tableData = [];
axios({
method: 'post', url: '',
data: {
ajax: true, act: ''
},
loading:{ target:".table_tree"}
}).then(response => {
let resp = response.data;
if (resp.success) {
const funcGrants = resp.funcGrants;
funcGrants.forEach(item=>{
this.tableData.push({
id:item.role_id +"-" + item.name,
system: item.funcMap,
});
});
callback && callback();
} else {
// ...
}
}).catch(function (error) {
// ...
});
},
}记录一些笨方法