树形数据遍历

tree

树形结构如下：

graph LR key:1-->key:1-1; key:1-->key:1-2; key:1-1-->key:1-1-1; key:1-1-->key:1-1-2; key:1-1-2-->key:1-1-2-1; key:1-1-2-->key:1-1-2-2; key:1-2-->key:1-2-1; key:1-2-->key:1-2-2; key:1-2-->key:1-2-3; key:1-2-3-->key:1-2-3-1; key:1-2-3-->key:1-2-3-2;

输入数组[ '1-2-1' , '1-2-3-2' ]要求输出如下树形结构：

graph LR key:1-->key:1-2; key:1-2-->key:1-2-1; key:1-2-->key:1-2-3; key:1-2-3-->key:1-2-3-2;

实现代码如下：

mapChangeArray(arr, disabled?) {
    const isDisabled = disabled ? disabled : false;
    arr.forEach(o => {
      o['title'] = o['label'];
      o['key'] = o['id'];
      o['disabled'] = isDisabled;
      if (!o.children) {
        o['isLeaf'] = true;
      }
      if (this.defaultCheckedKeys.some(x => x === o.key)) {
        this.setTree(o);
      }

      if (o.children && Object.prototype.toString.call(o.children) === '[object Array]' && o.children.length > 0) {
        this.mapChangeArray(o.children, isDisabled);
      }
    });
  }

  // 设置树
  setTree(item) {
    const path = this.findPathBFS(this.treeAll, item.key);
    this.setProp(this.treeAll, path);
  }

  findPathBFS(source, goal) {
    // 深拷贝原始数据
    const dataSource = JSON.parse(JSON.stringify(source));
    const res = [];
    // 每一层的数据都 push 进 res
    res.push(...dataSource);
    // res 动态增加长度
    for (let i = 0; i < res.length; i++) {
      const curData = res[i];
      // 匹配成功
      if (curData.key === goal) {
        const result = [];
        // 返回当前对象及其父节点所组成的结果
        return (function findParent(data) {
          result.unshift(data.key);
          if (data.parent) { return findParent(data.parent); }
          return result;
        })(curData);
      }

      // 如果有 children 则 push 进 res 中待搜索
      if (curData.children) {
        res.push(...curData.children.map(d => {
          // 在每一个数据中增加 parent，为了记录路径使用
          d.parent = curData;
          return d;
        }));
      }
    }

    // 没有搜索到结果，默认返回空数组
    return [];
  }

  setProp(arr, path) {
    const pathTemp = path;
    arr.forEach(item => {
      if (path.some(x => x === item.key)) {
        item.has = true;
      }

      if (item.children && Object.prototype.toString.call(item.children) === '[object Array]' && item.children.length > 0) {
        this.setProp(item.children, pathTemp);
      }
    });
  }

  fliterTree(arr) {
    for (let i = 0; i < arr.length; i++) {
      if (!arr[i].has) {
        arr.splice(i, 1);
        i--;
        continue;
      }

      if (arr[i].children && Object.prototype.toString.call(arr[i].children) === '[object Array]' && arr[i].children.length > 0) {
        this.fliterTree(arr[i].children);
      }
    }
  }

调用方式：

this.mapChangeArray(this.treeAll);
this.fliterTree(this.treeAll);
this.treeList = JSON.parse(JSON.stringify(this.treeAll));

输入树形数据：

this.treeAll = [
      {
        "children": [
          {
            "children": [
              {
                "id": 210,
                "label": "dashboard_panel"
              },
              {
                "children": [
                  {
                    "id": 212,
                    "label": "dashboard_card-edit"
                  },
                  {
                    "id": 213,
                    "label": "dashboard_card-view"
                  }
                ],
                "id": 211,
                "label": "dashboard_card"
              }
            ],
            "id": 209,
            "label": "dashboards"
          }
        ],
        "id": 208,
        "label": "dashboard_manage"
      },
      {
        "id": 300,
        "label": "user_manage",
        "children": [
            {
            "id": 312,
            "label": "user_card-edit"
            },
            {
            "id": 313,
            "label": "user_card-view"
            }
         ]
      }
    ]