算法【递归】——前端实践：树形控件

需求描述：将一维数组通过递归生成el-tree所需要的树形结构数组。
效果如下：

<template>
  <div>
    <el-tree
      :data="treeData"
      node-key="id"
      @check="check"
      :default-checked-keys="checkedKeys"
      show-checkbox
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeData: [],
      checkedKeys: [],
      selectedTreeNodes: []
    };
  },
  mounted(){
      this.initTreeData()
  },
  methods: {
    initTreeData() {
    // 初始数据结构
    let data = [  //level: 层级; sortNo: 所属层级的排序序号
        { parentId: "1", id: "1-2", label: "二级标题1-2", sortNo: 2, level:2 },
        { parentId: "root", id: "1", label: "一级标题1", sortNo: 1, level:1},
        { parentId: "root", id: "3", label: "一级标题3", sortNo: 3, level:1 },
        { parentId: "1", id: "1-1", label: "二级标题1-1", sortNo: 1, level:2 },
        { parentId: "2", id: "2-1", label: "二级标题2-1", sortNo: 1, level:2 },
        { parentId: "1-2", id: "1-2-1", label: "三级标题1-2-1", sortNo: 1, level:3 },
        { parentId: "root", id: "2", label: "一级标题2", sortNo: 2, level:1 },
        { parentId: "2", id: "2-2", label: "二级标题2-2", sortNo: 2, level:2 },
      ];
      // 第一步：乱序-排序
      data.sort((a,b)=>{return a.level == b.level ? a.sortNo-b.sortNo : a.level - b.level});
      // 第二步：利用对象的性质存储父节点与子节点的映射关系
      let obj = {}
      data.forEach(ele=>{ (!obj[ele.parentId]) ? obj[ele.parentId] = new Array(ele) : obj[ele.parentId].push(ele)});
      // 第三步：递归生成树状结构
      this.treeData = this.toTree(obj, 'root');  //‘root' 根节点
      console.log('treeData', this.treeData);   
      // 处理后数据结构
      // let data = [  //level: 层级; sortNo: 所属层级的排序序号
      //   { parentId: "root", id: "1", label: "一级标题1", sortNo: 1, level:1, children: [
      //       { parentId: "1", id: "1-1", label: "二级标题1-1", sortNo: 1, level:2, children: [] },
      //       { parentId: "1", id: "1-2", label: "二级标题1-2", sortNo: 2, level:2, children: [
      //           { parentId: "1-2", id: "1-2-1", label: "三级标题1-2-1", sortNo: 1, level:3 },
      //       ]},
      //    ]},      
      //   { parentId: "root", id: "2", label: "一级标题2", sortNo: 2, level:1, children:[
      //       { parentId: "2", id: "2-1", label: "二级标题2-1", sortNo: 1, level:2, children: [] },
      //       { parentId: "2", id: "2-2", label: "二级标题2-2", sortNo: 2, level:2, children: [] },
      //   ]},  
      //   { parentId: "root", id: "3", name: "一级标题3", sortNo: 3, level:1, children: [] }
      // ];
    },
    toTree(obj, treeNode){
        let treeNodeList = obj[treeNode];
        if(!treeNodeList) return [];
        let res = [];
        treeNodeList.forEach(ele => {
            let children = JSON.parse(JSON.stringify(this.toTree(obj, ele.id)));
            res.push({...ele, children});
        })
        return res;
    },
    /* 节点点击选择 */
    check(row, rows){
        let {checkedKeys, checkedNodes} = rows;
        this.selectedTreeNodes = checkedNodes;
    },
  }
};
</script>