将数据列表格式化成树形结构的方法—FormatTree

格式化为树形结构

我们在做前端路由的时候会出现(后端没有返回树形路由权限）的情况：
1.前端login登录成功后，后端会返回对应用户的uid；
2.拿到对应的uid 向后端发送路由权限接口；
3，将返回的路由列表数据格式化成树形结构，并保存在vuex中，供后续菜单等使用；
4.将这封装好的树形结构的路由权限数据，格式化成路由需要的样式，并通过addRouter()方法添加到静态路由中；

方法一（递归）

//第一种方法格式化成树形结构(递归)
export function formatUserRouterTree(RouterList) {
  //先将列表数据分成两类，第一类就是就是pid==0的，第二类就是pid！==0的,
  //因为pid==0肯定是父亲，其他的不管是谁的儿子，肯定是儿子
  let parents = RouterList.filter((p) => p.pid === 0);
  let childrens = RouterList.filter((c) => c.pid !== 0);
  generateTree(parents, childrens);

  function generateTree(parents, childrens) {
    parents.map((p) => {
      childrens.map((c, idx) => {
        if (p.id == c.pid) {
          //拷贝一份剔除当前的这一项所有儿子的数据，就是其他的所有儿子，不管是谁的儿子
          let _c = JSON.parse(JSON.stringify(childrens));
          _c.splice(idx, 1);
          //到了这一步，就可以理解为这一项已经找到父亲了，就开始找这一项的儿子
          generateTree([c], _c);
          if (p.children) {
            p.children.push(c);
          } else {
            p.children = [c];
          }
        }
      });
    });
  }
  return parents;
}

方法二

// 第二种方法格式化成树形结构
export function formatUserRouterTree(source) {
  let cloneData = JSON.parse(JSON.stringify(source));
  return cloneData.filter((father) => {
    let branchArr = cloneData.filter((child) => father.id === child.pid);
    branchArr.length > 0 ? (father.children = branchArr) : "";
    return father.pid === 0; // 如果第一层不是parentId=0，请自行修改
  });
}

听说还要只遍历一次就可以封装的方法