1:数据结构:每个元素都具有id、pid、title等数据,但id是唯一标识,pid也是,其他元素根据需求来定义
数据根据自己需求,为了演示就写了几个:
var arr = [
{
id: 1,
pid: 0,
title:"一级",
}, {
id: 2,
pid: 1,
title: "二级",
}, {
id: 3,
pid: 1,
title: "一级",
}, {
id: 4,
pid: 0,
title: "一级",
} , {
id: 0,
pid: 0,
title: "一级",
}, {
id: 6,
pid: 5,
title: "一级",
}
]
2、先获取所有数据
获取一级数据的方法:使用for...of遍历数据list,查找id为当前pid的元素,添加到data里面
获取二级数据方法:使用for..og遍历数组,添加一个空数组为children,然后再次调用getTree函数,将当前一级id作为pid,传到一级的children数字里面。
递归逻辑代码:
//处理数据方法
function getTree(list, pid, data) {
//获取所有一级
for (let item of list) {
if (item.pid == pid) {
data.push(item);
}
}
//获取子级
for (let i of data) {
i.children = [];
getTree(list, i.id, i.children); //递归调用
if (i.children.length == 0) {
delete i.children;
}
}
// console.log(data);
return data;
}