并排结构通过关联id变更为树结构

直接上封装好代码

//并排结构通过关联id变更为树结构,子id subid , 父id parentID
const treeStructure = (
  data: Array<any>,
  subid: string = "ID",
  parentID: string = "pid"
) => {
  let tableData: any = [];
  let tableDataArr = data;
  tableDataArr.map((item) => {
    //给所有对象一个children属性
    item.children = [];
    if (item[parentID] != 0) {
      tableDataArr.map((r) => {
        if (item[parentID] == r[subid]) {
          //删除子组中的children,目前只有二级分类
          delete item.children;
          r.children.push(item);
        }
      });
    }
  });
  //删除在一级外的所有子类
  tableDataArr.forEach((item) => {
    if (item[parentID] == 0) {
      tableData.push(item);
    }
  });
  return tableData;
};

传参的话主要是接口的数据源传进来,必须是数组!

然后subid是子id,parentID是父id,当parentID为0说明该层为最高级,具体按照后端给的接口进行一个判断

let obj = [
    {
       name:"我是父亲"
       subid:1,
       parentID:0
    },
    {
       name:"我是儿子"
       subid:2,
       parentID:1,//parentID和subid是存在关联关系的,如果parentID和其他列的subid相同的话,那么他们肯定存在层级关系
    }
]

parentID和subid是存在关联关系的,如果parentID和其他列的subid相同的话,那么他们肯定存在层级关系

通过我写的那个函数

可以变成

let obj = [
    {
       name:"我是父亲"
       subid:1,
       parentID:0,
       children:[
        {
           name:"我是儿子"
           subid:2,
           parentID:1
        }
      ]
    },
    
]

大概就是这样,可以使的并排的数据,变成树结构数据,方便我们对接ui库

猜你喜欢

转载自blog.csdn.net/xiaoxiongxia/article/details/131580690
今日推荐