vue将后台返回的数据处理为tree格式(学习篇)

1、后台返回的数据格式满足的条件

2、后台返回所有数据

3、数据格式处理

1>将parentId为0的数据找push进数组到并传递给data2treeDG函数

  // 将parentId为0的数据找到并传递给data2treeDG函数
    getListData(DemoNode) {
      // DemoNode为后台取到的所有数据
      let dataArray = [];
      DemoNode.forEach(function (data) {
        let parentId = data.parentId;
        // 判断parentId是否为0
        if (parentId == 0) {
          dataArray.push(data);
        }
      })
      this.data2treeDG(DemoNode, dataArray)
    },

2>处理传递的数据

 // 将数据处理为tree格式(第一次执行注释)
    data2treeDG(datas, dataArray) {
      // 第一次循环parentId为0的数据，后面循环parentId是否和前一次循环parentId为0的dnaId相同
      for (let j = 0; j < dataArray.length; j++) {
        // 保存传递的对象数据
        let dataArrayIndex = dataArray[j];
        let childrenArray = [];
        // 保存该对象中的dnaId
        let Id = dataArrayIndex.dnaId;
        // 循环请求到的所有的数据
        for (let i = 0; i < datas.length; i++) {
          let data = datas[i];
          // 保存当前对象中的parentId
          let parentId = data.parentId;
          // 判断当前parentId是否和第一次parentId为0的dnaId是否相同，后面循环则是当前的parentId是否和上次一数据中dnaId相同
          if (parentId == Id) {
            // 将这条数据push到定义的childrenArray数组中
            childrenArray.push(datas[i]);
          }
        }
        // dataArrayIndex是个对象，对象点children属性，把上面筛选的数据放在dataArrayIndex下的一个属性
        dataArrayIndex.children = childrenArray;
        // childrenArray里面是否有数据,//有儿子节点则递归
        if (childrenArray.length > 0) {
          // 传递所有数据和childrenArray数据
          this.data2treeDG(datas, childrenArray)
        }
      }
      // 给data中的数据赋值
      this.setTree = dataArray;
      this.DemoData = this.setTree[0]
    },

3>dataArray就为处理好的tree数据，可以去做element的树形控件，也可以去做echart的图表，只要满足这种数据格式的都可以。

4、我做的是treeChart的图表，效果如下：