filter 方法
<script>
const data = [
{id:"01", name: "张大大", pid:"", job: "项目经理"},
{id:"02", name: "小亮", pid:"01", job: "产品leader"},
{id:"07", name: "小丽", pid:"02", job: "产品经理"},
{id:"08", name: "大光", pid:"02", job: "产品经理"},
{id:"03", name: "小美", pid:"01", job: "UIleader"},
{id:"09", name: "小高", pid:"03", job: "UI设计师"},
{id:"05", name: "老王", pid:"01", job: "测试leader"},
{id:"06", name: "老李", pid:"01", job: "运维leader"},
{id:"04", name: "老马", pid:"01", job: "技术leader"},
{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: "运维工程师"}
]
const tree =arrToTree(data)
function arrToTree(data){
const treeData=[] //最终结果
data.forEach(obj=>{
//如果pid是空的,直接放到数组中,为顶级数据
if(!obj.pid){
treeData.push(obj)
}
//数据中的Pid与此项数据的id相同,就是此项数据的children
const children=data.filter(item=>item.pid===obj.id)
obj.children=children
})
return treeData
}
console.log(tree)
</script>
递归方法
<script>
const data = [
{ id: "01", name: "张大大", pid: "", job: "项目经理" },
{ id: "02", name: "小亮", pid: "01", job: "产品leader" },
{ id: "07", name: "小丽", pid: "02", job: "产品经理" },
{ id: "08", name: "大光", pid: "02", job: "产品经理" },
{ id: "03", name: "小美", pid: "01", job: "UIleader" },
{ id: "09", name: "小高", pid: "03", job: "UI设计师" },
{ id: "05", name: "老王", pid: "01", job: "测试leader" },
{ id: "06", name: "老李", pid: "01", job: "运维leader" },
{ id: "04", name: "老马", pid: "01", job: "技术leader" },
{ 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: "运维工程师" }
]
const firstPid = ''//顶级
function arrToTree(data, firstPid) {
const treeData = []
data.forEach(obj => {
//如果pid是空 就是顶级
if (obj.pid === firstPid) {
//去查找此项数据的下一级 整个数据中所有pid和此项数据id相等的数据
// 数据中所有 Pid 与 此项数据 Id 相等的,都是此项数据的下一级
const children = arrToTree(data, obj.id)
//如果找到了 就是此项数据的下一级
if (children.length) {
obj.children = children
}
//最后把此项数据加到treeData中
treeData.push(obj)
}
})
return treeData
}
const tree = arrToTree(data, firstPid)
console.log(tree)
</script>