后端接口返回的数据一般是平铺的数组结构，而不会是树形结构，例如下面的平铺数组结构：
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组件中使用，所以需要我们做一些转换。
二.源码: script里面的函数源码:methods: {
dataToTree() {
// 查找出一级人员
const res1 = this.data.filter((item) => item.id === "01");
// 查找出二级人员
const res2 = this.data.filter((item) => item.pid === "01");
// 定义一级人员架构
this.treeData1 = [
{
label: res1[0].job + "-" + res1[0].name,
children: [],
},
];
for (let i = 0; i < res2.length; i++) {
// 把二级人员对象提取出来
const element = res2[i];
// 查找出三级人员
const res3 = this.data.filter((item) => item.pid === element.id);
// 定义二级人员架构
const treeData2 = {
label: element.job + "-" + element.name,
children: [],
};
for (let j = 0; j < res3.length; j++) {
// 定义三级人员架构
const treeData3 = {
label: res3[j].job + "-" + res3[j].name,
children: [],
};
// 将三级人员结构放入二级人员结构的children中
treeData2.children.push(treeData3);
}
// 将二级人员结构放入一级人员结构的children中
this.treeData1[0].children.push(treeData2);
}
console.log(this.treeData1);
},
},
三.主要技术:1.用vue和Element组件布局
2.利用递归循环遍历数组获得自己所需要的各类数据然后依据需求放入对应的位置,具体操作见上图函数代码
