当我们使用element组件库的Tree组件时,我们需要一个树形数据才能进行渲染
const arr = [
{ id: '01', name: '张大大 项目经理', pid: '', job: '项目经理' },
{ id: '02', name: '小亮 产品leader', pid: '01', job: '产品leader' },
{ id: '03', name: '小美', pid: '01', job: 'UIleader' },
{ id: '04', name: '老马 技术leader', pid: '01', job: '技术leader' },
{ id: '05', name: '老王 测试leader', pid: '01', job: '测试leader' },
{ id: '06', name: '老李 运维leader', pid: '01', job: '运维leader' },
{ id: '07', name: '小丽 产品经理', pid: '02', job: '产品经理' },
{ id: '08', name: '大光 产品经理', pid: '02', job: '产品经理' },
{ id: '09', name: '小高 UI设计师', 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: '运维工程师' },
{ id: '16', name: '小才 运维工程师', pid: '07', job: '运维工程师' },
]
function tranTreeData(sourceData) {
// 最终要产出的数组,是一个树形的结构
const treeList = []
// 所有项都使用对象存储起来
const obj= {}//每一个对象
// 先遍历原数组 以原数组中的每一项的id作为对象的key, 每一项本身作为对象的value形成一个对象结构(obj)
sourceData.forEach(item => {//是一个对象 { id: '16', name: '小才 运维工程师', pid: '07', job: '运维工程师' }
if (!item.children) {//对象里面无children节点
item.children = []
}
//如果有children节点
obj[item.id] = item//将item的id作为obj的属性, obj[item.id]的值就是对于id的item对象
//obj[16]= { id: '16', name: '小才 运维工程师', pid: '07', job: '运维工程师' }
// console.log(obj[item.id])
})
//遍历原数组 使用数组中的每一项的pid 去第一步形成的obj结构去匹配key(id) 如果匹配上
// 1、就把当前项放入找到节点的children属性中去 如果无法完成匹配 代表当前项就是最根上的父节点
sourceData.forEach(item => {// { id: '16', name: '小才 运维工程师', pid: '07', job: '运维工程师' }
const parent = obj[item.pid]//将pid的值作为item的属性 obj[07]={ id: '07', name: '小丽 产品经理', pid: '02', job: '产品经理' }
// console.log(parent)
// 如果存在则表示item不是最顶层的数据
if (parent) {
if (!parent.children) {
parent.children = []
}
parent.children.push(item)//第几层
} else {
// 如果不存在 则是顶层数据
treeList.push(item)//第一层
}
})
// 返回出去
// 2,那就把当前项直接放到最终产出的treeList中去
return treeList
// js复杂类型 存储的是内存的指针 一处修改 另外一处也会同步更新
}
变成这样一个有层级关系的数据