使用递归的方法拼接树形结构

173 阅读1分钟

1、后端返回的数据结构

image.png

2、希望变成的树形结构

image.png

3、实现代码

const data = [
    {id:1,parent:null,name:'菜单1'},
    {id:2,parent:1,name:'菜单1-1'},
    {id:3,parent:1,name:'菜单1-2'},
    {id:4,parent:null,name:'菜单4'},
    {id:5,parent:4,name:'菜单4-1'},
    {id:6,parent:4,name:'菜单4-2'},
    {id:7,parent:2,name:'菜单1-1-1'},
    {id:8,parent:2,name:'菜单1-1-2'},
    {id:9,parent:2,name:'菜单1-1-3'},
    {id:10,parent:3,name:'菜单1-3-1'},
    {id:11,parent:3,name:'菜单1-3-2'},
]

const getTreeData = (data,currentParent,currentTreeData) => {
    // 将最起始的item放到treeData中
    data.forEach((item,index) => {
        if(item.parent === currentParent){
            currentTreeData.push(item)
        }
    })
    // 对treeData进行遍历
    currentTreeData.forEach((item,index) => {
        item.children = []
        // 递归
        getTreeData(data,item.id,item.children)
        // 最后一个 item 删除 children 属性
        if(item.children.length === 0){
            delete item.children
        }
    })
    return currentTreeData
}

const treeData = getTreeData(data,null,[])
console.log(treeData)