将从后端获取的数据生成一个树数据

后端数据如下：

 datas: [
        {
          id: 1,
          title: "第1个",
          pId: 0
        },
        {
          id: 2,
          title: "第2个",
          pId: 0
        },
        {
          id: 3,
          title: "第3个",
          pId: 0
        },
        {
          id: 4,
          title: "第4个",
          pId: 0
        },
        {
          id: 5,
          title: "第1-1个",
          pId: 1
        },
        {
          id: 6,
          title: "第1-2个",
          pId: 1
        },
        {
          id: 7,
          title: "第2-1个",
          pId: 2
        },
        {
          id: 8,
          title: "第3-1个",
          pId: 3
        },
        {
          id: 9,
          title: "第4-1个",
          pId: 4
        },
        {
          id: 10,
          title: "第2-2个",
          pId: 2
        },
        {
          id: 11,
          title: "第3-2个",
          pId: 3
        },
        {
          id: 12,
          title: "第1-3个",
          pId: 1
        },
        {
          id: 13,
          title: "第1-1-1个",
          pId: 5
        },
        {
          id: 14,
          title: "第2-1-1个",
          pId: 7
        },
        {
          id: 15,
          title: "第3-2个",
          pId: 3
        },
        {
          id: 16,
          title: "第4-2个",
          pId: 4
        },
        {
          id: 17,
          title: "第1-1-2个",
          pId: 5
        },
        {
          id: 18,
          title: "第1-2-1个",
          pId: 6
        },
        {
          id: 19,
          title: "第2-1-2个",
          pId: 7
        },
        {
          id: 20,
          title: "第3-1-1个",
          pId: 8
        },
        {
          id: 21,
          title: "第4-1-1个",
          pId: 9
        },
        {
          id: 22,
          title: "第2-2-1个",
          pId: 10
        },
        {
          id: 23,
          title: "第2-2-2个",
          pId: 10
        },
        {
          id: 24,
          title: "第1-3-1个",
          pId: 12
        }
      ]

第一种笨办法(这种你知道这个树有几层才能用)：

    // 生成一格树
    this.datas.forEach(element => {
      // 第一层
      this.common(this.newdata, element, 0);
    });

    // 第二层
    this.datas.forEach(element => {
      this.newdata.forEach(element1 => {
        this.common(element1.children, element, element1.id);
      });
    });
    // 第三层
    this.datas.forEach(element => {
      this.newdata.forEach(element1 => {
        element1.children.forEach(element2 => {
          if (element1.children.length !== 0) {
            this.common(element2.children, element, element2.id);
          }
        });
      });
    });

第二种方法(不论多少层):

 let formatObj = this.datas.reduce((pre, cur) => {
      return { ...pre, [cur["id"]]: cur };
    }, {});
    let formatArray = this.datas.reduce((arr, cur) => {
      console.log('arr',arr);
      // 获取当前元素的pId 如果没有则设为0  如果有则获取其pId
      let pId = cur.pId ? cur.pId : 0;
      let parent = formatObj[pId];
    // 这里的parent是当前元素的pId   如果不为0 则代表它是某个分支的子集 
      if (parent) {
        // 判断当前分支的children数组是否为[] 如果为[]则将当前元素赋值给该数组 如果不为[]则push
        parent.children ? parent.children.push(cur) : (parent.children = [cur]);
      } else {
        // 这是pId为0的情况
        arr.push(cur);
      }
      return arr;
    }, []);
    this.newdata = formatArray;

如果碰到解析不了es6语法的情况
安装下面的依赖：

npm install --save-dev babel-preset-stage-0

配置：
babelrc文件：

{
    "presets": ["stage-0"],
    "plugins": [
        "transform-vue-jsx",
        [
            "transform-runtime", {
                "helpers": false,
                "polyfill": false,
                "regenerator": true,
                "moduleName": "babel-runtime"
            }
        ]
    ]
}

image.png