JS实现无限层级树形数据结构：从扁平数组到Vue组件的完整方案

线性数组转树形结构算法原理

在项目开发中，常需将线性数组转换为树形结构。网上现有方案往往过于复杂，为此我设计了一种更简洁的方法。经过调试，仅使用两个filter过滤器即可完成转换，代码逻辑清晰，即使数据结构初学者也能轻松理解。

以下是将扁平数据转换为树形数据的具体JavaScript代码实现。

function setTreeData(source){
  let cloneData = JSON.parse(JSON.stringify(source))   // 对源数据深度克隆
  return cloneData.filter(father=>{           // 循环所有项，并添加children属性
    let branchArr = cloneData.filter(child=> father.id == child.parentId);  // 返回每一项的子级数组
    branchArr.length>0 ? father.children=branchArr : ''  //给父级添加一个children属性，并赋值
    return father.parentId==0;   //返回第一层
  });
}

针对此前算法可能修改源数据的问题，我在获取数据后增加了深度克隆步骤，从而完美解决了副作用问题。

具体封装函数如下所示。

function treeData(source, id, parentId, children){  
  let cloneData = JSON.parse(JSON.stringify(source))
  return cloneData.filter(father=>{
    let branchArr = cloneData.filter(child => father[id] == child[parentId]);
    branchArr.length>0 ? father[children] = branchArr : ''
    return father[parentId] == 0    // 如果第一层不是parentId=0，请自行修改
  })
}
 
// 调用时，字段名以字符串的形式传参，如treeData(source, 'id', 'parentId', 'children')

Vue Element-UI树形菜单实战

实例演示：利用element-ui组件构建一个支持多级嵌套和伸缩功能的树形菜单。

最终实现效果如图所示。

对应的Vue组件代码如下。

<template>
 <el-tree
  :data="treeData"
  :props="defaultProps"
  accordion
  @node-click="handleNodeClick">
 </el-tree>
</template>
 
<script>
  export default {
    name: "Test",
   data(){
    return {
     data : [
      {id:1,parentId:0,name:"一级菜单A",rank:1},
      {id:2,parentId:0,name:"一级菜单B",rank:1},
      {id:3,parentId:0,name:"一级菜单C",rank:1},
      {id:4,parentId:1,name:"二级菜单A-A",rank:2},
      {id:5,parentId:1,name:"二级菜单A-B",rank:2},
      {id:6,parentId:2,name:"二级菜单B-A",rank:2},
      {id:7,parentId:4,name:"三级菜单A-A-A",rank:3},
      {id:8,parentId:7,name:"四级菜单A-A-A-A",rank:4},
      {id:9,parentId:8,name:"五级菜单A-A-A-A-A",rank:5},
      {id:10,parentId:9,name:"六级菜单A-A-A-A-A-A",rank:6},
      {id:11,parentId:10,name:"七级菜单A-A-A-A-A-A-A",rank:7},
      {id:12,parentId:11,name:"八级菜单A-A-A-A-A-A-A-A",rank:8},
      {id:13,parentId:12,name:"九级菜单A-A-A-A-A-A-A-A-A",rank:9},
      {id:14,parentId:13,name:"十级菜单A-A-A-A-A-A-A-A-A-A",rank:10},
     ],
     defaultProps: {
      children: 'children',
      label: 'name'
     }
    }
   },
   computed:{
    treeData(){
     let cloneData = JSON.parse(JSON.stringify(this.data))  // 对源数据深度克隆
     return cloneData.filter(father=>{        
      let branchArr = cloneData.filter(child=>father.id == child.parentId)  //返回每一项的子级数组
      branchArr.length>0 ? father.children = branchArr : ''  //如果存在子级，则给父级添加一个children属性，并赋值
      return father.parentId==0;   //返回第一层
     });
    }
   },
   methods:{
    handleNodeClick(data){
     // console.log(data)
     console.log(this.treeData)
    }
   },
   mounted(){
   }
  }
</script>
 
<style scoped>
 
</style>

完整Demo代码见下文。

若需将树形数据转换回扁平数据，请参考文章：js实现树形数据转成扁平数据。