数组转成树:
后端接口返回的数据一般是平铺的数组结构,而不会是树形结构,例如下面的平铺数组结构:
data =
[
{id:"01", name: "张大大", pid:"", job: "项目经理"},
{id:"02", name: "小亮", pid:"01", job: "产品leader"},
{id:"03", name: "小美", pid:"01", job: "UIleader"},
{id:"04", name: "老马", pid:"01", job: "技术leader"},
{id:"05", name: "老王", pid:"01", job: "测试leader"},
{id:"06", name: "老李", pid:"01", job: "运维leader"},
{id:"07", name: "小丽", pid:"02", job: "产品经理"},
{id:"08", name: "大光", pid:"02", job: "产品经理"},
{id:"09", name: "小高", pid:"03", job: "UI设计师"},
{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
{id:"11", name: "小华", pid:"04", job: "后端工程师"},
{id:"12", name: "小李", pid:"04", job: "后端工程师"},
{id:"13", name: "小赵", pid:"05", job: "测试工程师"},
{id:"14", name: "小强", pid:"05", job: "测试工程师"},
{id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]
这样的数据可以直接在table中使用,但是不能直接在tree组件中使用,需要我们做一些转换。
需要额外补充一个函数做转换:
const data = [
{id:"01", name: "张大大", pid:"", job: "项目经理"},
{id:"02", name: "小亮", pid:"01", job: "产品leader"},
{id:"03", name: "小美", pid:"01", job: "UIleader"},
{id:"04", name: "老马", pid:"01", job: "技术leader"},
{id:"05", name: "老王", pid:"01", job: "测试leader"},
{id:"06", name: "老李", pid:"01", job: "运维leader"},
{id:"07", name: "小丽", pid:"02", job: "产品经理"},
{id:"08", name: "大光", pid:"02", job: "产品经理"},
{id:"09", name: "小高", pid:"03", job: "UI设计师"},
{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
{id:"11", name: "小华", pid:"04", job: "后端工程师"},
{id:"12", name: "小李", pid:"04", job: "后端工程师"},
{id:"13", name: "小赵", pid:"05", job: "测试工程师"},
{id:"14", name: "小强", pid:"05", job: "测试工程师"},
{id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]
// 完成代码
function arrToTree(data) {
// 你的代码
}
// 目标:
const treeData = arrToTree(data)
// treeData就是:
// [{
// label: '张大大',
// children: [
// {
// label: '小亮',
// children: [{label: '小丽'},{label: '大光'}]
// },
// {
// label: '小美',
// children: [{label: '小高'}]
// },
// {
// label: '老马',
// children: [{label: '小刘'},{label: '小华'},{label: '小李'}]
// },
// {
// label: '老王',
// children: [{label: '小赵'},{label: '小强'}]
// },
// {
// label: '老李',
// children: [{label: '小涛'}]
// }
// ]
// }]
以下是我的代码:
const data = [
{ id: "01", name: "张大大", pid: "", job: "项目经理" },
{ id: "02", name: "小亮", pid: "01", job: "产品leader" },
{ id: "03", name: "小美", pid: "01", job: "UIleader" },
{ id: "04", name: "老马", pid: "01", job: "技术leader" },
{ id: "05", name: "老王", pid: "01", job: "测试leader" },
{ id: "06", name: "老李", pid: "01", job: "运维leader" },
{ id: "07", name: "小丽", pid: "02", job: "产品经理" },
{ id: "08", name: "大光", pid: "02", job: "产品经理" },
{ id: "09", name: "小高", pid: "03", job: "UI设计师" },
{ id: "10", name: "小刘", pid: "04", job: "前端工程师" },
{ id: "11", name: "小华", pid: "04", job: "后端工程师" },
{ id: "12", name: "小李", pid: "04", job: "后端工程师" },
{ id: "13", name: "小赵", pid: "05", job: "测试工程师" },
{ id: "14", name: "小强", pid: "05", job: "测试工程师" },
{ id: "15", name: "小涛", pid: "06", job: "运维工程师" },
];
function arrToTree(data) {
// 1.创建项目经理的对象
let xmjl = {};
// 把项目经理摘出来
data.forEach((item) => {
item.lable = item["name"];
delete item.name;
delete item.job;
if (item.id === "01") {
// console.log(item)
delete item.id;
delete item.pid;
xmjl = item;
}
});
// 2.给项目经理对象创建一个 Children数组
xmjl.Children = [];
// 遍历数组 把 项目经理的小跟班找到
data.forEach((item) => {
if (item.pid === "01") {
// 解构赋值 不然会改变他的原数据
const newobj = { ...item };
// 给新对象创建一个Children数组
newobj.Children = [];
// 把这些数据全都插入到项目经理的数组里
xmjl.Children.push(newobj);
// console.log(newobj)
}
});
// 筛选出 不是经理的人员
const a = data.filter(function (item) {
return item.pid !== "" && item.pid !== "01";
});
// 遍历筛选出来的人员
a.forEach((item) => {
// 和项目经理手下的经理一一比对
xmjl.Children.forEach((obj) => {
// 如果是他的人,就插入到哪个经理的children下
if (item.pid === obj.id) {
// console.log(item)
// 把当前的人员插入到各项目经理下
delete item.id;
delete item.pid;
obj.Children.push(item);
// console.log(obj)
}
});
});
xmjl.Children.forEach((item) => {
delete item.id;
delete item.pid;
});
// console.log(xmjl);
return xmjl;
}
const treeData=arrToTree(data);
console.log(treeData);