转载自 [废柴码农(是个小姐姐)] ==>https://www.jianshu.com/p/207cafcfb390
这位小姐姐的是 react 版
于是我参考着改了一点点,记录一下,写得不好,仅供参考, 见谅~
---------------data中-------------------
data(){
return{
test: [],
businessData: [],
businessSelectedRowKeys: [],
allSelectedNodes: [],
}
}
------------------methods---------------------
onBusinessSelectChange(selectedKeys, info) {
// console.log('selectedKeys changed: ', selectedKeys);
// console.log('info changed: ', info);
// 已勾选子节点以及半勾选状态的父节点
this.allSelectedNodes = selectedKeys.concat(info.halfCheckedKeys);
this.businessSelectedRowKeys = selectedKeys;
},
引用小姐姐的一段话
但是,(又敲黑板!!!)我们给后台传过去了父节点,如果有反显的情况下(如:修改,查看功能),一旦有父节点,子节点又将会全部勾选!!这种情况下又该怎么办呢?
思路如下:
1.循环遍历出最深层子节点,存放在一个数组中
2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较
3.如果有相同值,将相同值取出来,push到一个新数组中
4.利用这个新的重组的数组给Tree组件selected赋值
// 1.循环遍历出最深层子节点,存放在一个数组中
getTreeChildren(data){
data&&data.map(item=>{
if(item.children && item.children.length > 0){
this.getTreeChildren(item.children);
}else{
this.test.push(item.key);
};
return null;
});
return this.test;
},
// 2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较
// 3.如果有相同值,将相同值取出来,push到一个新数组中
compareItem(all_data,child_data){
let uniqueChild = [];
for(var i in child_data){
for(var k in all_data){
if(all_data[k] === child_data[i]){
uniqueChild.push(all_data[k]);
}
}
}
return uniqueChild;
},
handleOpenEdit(record,operationType) {
this.current.userCname = record.userCname;
this.current.userCode = record.userCode;
if(operationType === '业务权限配置'){
this.visibleBusinessModal = true;
this.businessSelectedRowKeys = [];
queryUserMakeComInfo(this.current).then(res => {
if(res.status == 0){
this.businessData = [];
this.businessData = this.getRootList(res.data.userpermitdatalist);
}
res.data.userpermitdatalist.forEach((el,index) => {
if(el.flag == 1){
this.businessSelectedRowKeys.push(el.comCode)
}
});
this.businessSelectedRowKeys = this.compareItem(this.businessSelectedRowKeys,this.getTreeChildren(this.businessData));
});
}
}