前端处理树状数据的一些方法

现在有一个这样的数据

• 江西
  – 南昌
  – 九江
• 上海
  – 航头
• 北京
  – 天安门
  – 故宫
  – 王府井

这样类似的数据

要处理成这样的数据

makeData(list, upArray, dataSource) { 
      dataSource.forEach((item) => { // 树形数据父级有多少个  就遍历多少次
        const array = [...upArray, item.id]; //拿到当前的id变成二维数组

        list.push(array); // push到list里
        if (item.children) { // 如果有children
          this.makeData(list, array, item.children); // 就拿children的id加上次父级的的数组 push到list里面
        }
      });
    }
 // 使用   
 let list = []
 this.makeData(list, [], result.data);   // result.data 就是第一次拿到后台的数据 

根据子级类型查找所有匹配的父级类型

• 如果当前可以获得最后子级的id ( 选择后发给后端了 后端返回回来的 )
• 但是为了回显 需要获得一串父级的id 类似如下数据
• 6002是子级的 需要拿到从最父级的一直到最子级的数组
• 如果拿到一串很多最子级的id的数据 也可以通过这个方法来处理

getFathersById(id, data, prop = 'id') { // 父级的id  和  树形数据
      const arrRes = [];
      const rev = (data, nodeId) => { // 传入树形的数据和父级的id
        for (let i = 0, length = data.length; i < length; i++) { // 因为是树形的数据 所以要少循环一次
          const node = data[i]; // 当前的数据 item

          if (node[prop] === nodeId) { // 如果当前数据的id等于父级的id  说明对应上了
            arrRes.unshift(node[prop]); // 就把当前的id添加到数组的前面
            return true; // 就返回true 继续执行
          } else { // 如果当前的id不等于传进去父级的id  就说明对应不上 就要开始找子级了
            if (node.children && node.children.length) { // 如果当前有children货children的数组有值
            //如果上面第一次 当前数据的id不等于父级的id 因为返回的是true 就还可以执行  继续传入children的数据和最父级的id  第一次可以匹配到第一个子级的id
              if (rev(node.children, nodeId)) { 
                arrRes.unshift(node[prop]); // 把子级的id添加到数组里  每次执行到这一步的时候 上面的if一定先执行了  先把父级的添加了一遍  
                return true; //返回成功继续执行
              }
            }
          }
        }
        return false; // 如果父级的id没匹配到 就找子级的  但是找到最后子级的children也为空了 就停止执行
      };

      rev(data, id);
      return arrRes;
    },
    // 传入
   LabeList.forEach(item => { // 遍历树桩数据  当前有多少个父级 添加多少个数组  因为每次都会生成一个新的数组
        arr.push(this.getFathersById(item, options));
      });