<template>
  <div style="width: 100%;height:100%;background-color:#ccc;"><pre style="font-size:20px;">{{aa}}</pre></div>
</template>
<script>
let sourceData = [
  {
    id: 1,
    parentId: 0
  },
  {
    id: 2,
    parentId: 0
  },
  {
    id: 3,
    parentId: 0
  },
  {
    id: 4,
    parentId: 1
  },
  {
    id: 5,
    parentId: 1
  }
];

export default {
  data() {
    return {
      aa: ""
    };
  },
  mounted() {
    this.dragTree();
  },
  methods: {
    dragTree() {
      let treeData = {
        id: 0,
        children: this.dgTree(0, sourceData)
      };
      this.aa = treeData;
    },
    // 反向组装树递归的精髓
    // 就是先找到最高级0,再往下找 看谁的父亲是0,再看谁的父亲又是1
    // 因为顶层0是确定的
    // 一旦顶层确定,就可以依照关系依次往下找
    dgTree(id, pxData) {
      let route = [];
      for (let item of pxData) {
        if (item.parentId === id) {
          route.push({
            id:item.id,
            parentId:item.parentId,
            children:this.dgTree(item.id,pxData)
          });
               
        }
      }
      return route;
    }
  }
};
</script>

Snipaste_2021-04-21_13-57-01.png

!!!!!

1.递归自调用理解的核心1-----大函数与小函数的同名变量互不影响

image.png

2.递归自调用理解的核心2-----执行顺序

image.png

现在我在换种写法,传入数组,返回树

Snipaste_2021-07-08_17-22-08.png Snipaste_2021-07-08_17-22-27.png