特别注意:为了逻辑比较清晰,下面的代码内容相对较多,但是可以兼容各种传入数组数据,例如:在存在搜索业务的情况下,传入的内容存在不一定存在一级节点的情况
let tableDefaultData = [
{ key: "1", title: renderTitle('1'), age: 27, parentKey: "0" },
{ key: "1.1", title: renderTitle("1.1"), age: 27, parentKey: "1", name: '小谭' },
{ key: "1.2", title: renderTitle("1.2"), age: 27, parentKey: "1" },
{ key: "1.1.1", title: renderTitle("1.1.1"), age: 27, parentKey: "1.1", name: '小谭' },
{ key: "1.2.1", title: renderTitle("1.2.1"), age: 27, parentKey: "1.2" },
{ key: "1.1.1.1", title: renderTitle("1.1.1.1"), age: 27, parentKey: "1.1.1" },
{ key: "2", title: renderTitle("2"), age: 27, parentKey: "0" },
{ key: "2.1", title: renderTitle("2.1"), age: 27, parentKey: "2" },
{ key: "2.1.1", title: renderTitle("2.1.1"), age: 27, parentKey: "2.1", name: '小谭' },
];
const getTreeData = (paramArr: any) => {
let arr = [...paramArr];
if (paramArr.length > 0) {
const handleTreeData = (key = paramArr[0].parentKey) => {
const parentNode = arr.filter((item: { parentKey: string }) => item.parentKey === key); //获取所有一级数据
const newData = parentNode.map((item: { key: any }) => {
arr = arr.filter((item: any) => item.key !== item.key); //移动掉原数组里面的数据
const obj = arr.find((val: { parentKey: any }) => val.parentKey === item.key);
if (obj) {
//判断当前遍历的数据是否存在子级
const childData: any = handleTreeData(obj.parentKey);
return { ...item, children: childData };
}
return { ...item, children: [] };
});
return newData;
};
const data = arr.map(item => { //得到每次遍历的结果数组
return handleTreeData(item.parentKey);
});
const result = [];
for (let i = 0; i < data.length; i++) {
if (data[i].length > 0) {
result.push(...data[i])
}
}
return result;
}
return [];
}
getTreeData(tableDefaultData )