原数据

const dataList = [
  { id: "1175311373083017216", pid: "", name: "技术部" },
  {
    id: "1235398608847052800",
    pid: "",
    name: "研发部",
  },
  {
    id: "1235398608847052801",
    pid: "1235398608847052800",
    name: "研发部1",
  },
  {
    id: "1235398608847052802",
    pid: "1235398608847052800",
    name: "研发部2",
  },
  {
    id: "1235398661355544576",
    pid: "1175311373083017216",
    name: "Python研发部",
  },
  {
    id: "1235398708763762688",
    pid: "1175311373083017216",
    name: "Php研发部",
  },
];

目标数据 

实现方法 


export const handleTreeData = (list: any) => {
  //封装一个方法 首先需要确定一个返回值TreeList
  const TreeList: any = [];
  // 将id和item 做一个映射关系newObj
  const newObj: any = {};
  list.forEach((item: any) => (newObj[item.id] = item));

  list.forEach((item) => {
    //如果item.id 和 pid 一致 
    if (newObj[item.pid]) {
      //如果item.id 和 pid 一致 且该item上没有children属性 该children为空
      if (!newObj[item.pid]["children"]) newObj[item.pid]["children"] = [];
      //如果item.id 和 pid 一致 且该item上有children属性 该children为item
      newObj[item.pid]["children"].push(item);
    } else {
    //如果item.id 和 pid 不一致 
      TreeList.push(item);
    }
  });
  console.log("TreeList", TreeList);
  return TreeList;
};

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐