近期做项目遇到一个需求:树形组件后端返回的数据包含父节点和子节点,但在子节点不全被选中的时候,不能把父节点给勾选上,否则会出现父节点被勾选,里边未被选中的子节点也全部被选中。
经过网上搜索,遇到一个很好的解决方案
1、const test = []; // 定义test 存放所有子节点的数组
2、循环遍历出最深层子节点(包含所有的子节点及没有子节点的父节点),存放在一个数组中
requestList = (data) => {
data.map((item) => {
if (item.children && item.children.length > 0) {
this.requestList(item.children);
} else {
test.push(item.key);
}
return null;
});
return test;
};
3、将后台返回的含有父节点的数组和第一步骤遍历的数组做比较,求交集
allArr:所有的树结构
functions:后端给的要展示的父子节点
const result = [...new Set(this.requestList(allArr))].filter((item) =>
new Set(eval(functions)).has(item)
);
4、 利用这个新的数组给Tree组件checkedKeys赋值