列表数据转tree(树形)结构数据

最新推荐文章于 2024-05-22 08:43:58 发布

转身_learner

最新推荐文章于 2024-05-22 08:43:58 发布

阅读量326

点赞数

文章标签： javascript vue.js typescript

本文链接：https://blog.csdn.net/weixin_47818125/article/details/127343065

版权

调用listToTree方法可以快速将一维列表数据转成树形结构数据

	let list= [
      {
        id: 1001,
        parentId: "",
        name: "AA",
      },
      {
        id: 1002,
        parentId: 1001,
        name: "BB",
      },
      {
        id: 1003,
        parentId: "",
        name: "CC",
      },
      {
        id: 1004,
        parentId: 1003,
        name: "DD",
      },
      {
        id: 1005,
        parentId: 1003,
        name: "EE",
      },
      {
        id: 1006,
        parentId: 1002,
        name: "FF",
      },
      {
        id: 1007,
        parentId: 1002,
        name: "GG",
      },
      {
        id: 1008,
        parentId: 1004,
        name: "HH",
      },
      {
        id: 1009,
        parentId: 1005,
        name: "II",
      },
    ]
    console.log(listToTree(list))
	function listToTree(data) {
      // * 先生成parent建立父子关系
      const obj = {};
      data.forEach((item) => {
        obj[item.id] = item;
      });
      const parentList = [];
      data.forEach((item) => {
        const parent = obj[item.parentId];
        if (parent) {
          // * 当前项有父节点
          parent.children = parent.children || [];
          parent.children.push(item);
        } else {
          // * 当前项没有父节点 -> 顶层
          parentList.push(item);
        }
      });
      return parentList;
    },