2021-10-09

把一个数组转成不定级树形数组

核心代码：

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’)

实战：使用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>