前端vue将普通数组转换为父子级的树形结构数组

如果获取的数据具有上下级关系，可以在前后端进行数据处理。这里我通过前端编写一个方法将普通数组转换为父子级的数据。

1. 编写转换方法，父子级数据主要通过id和父级id进行体现

transformTozTreeFormat: function (sNodes) {
   var i, l;
   var r = [];
   var tmpMap = {};
   for (i = 0, l = sNodes.length; i < l; i++) {
     tmpMap[sNodes[i].id] = sNodes[i];
   }
   for (i = 0, l = sNodes.length; i < l; i++) {
     var p = tmpMap[sNodes[i].pid];
     if (p && sNodes[i].id != sNodes[i].pid) {
       var children = this.nodeChildren(p);
       if (!children) {
         children = this.nodeChildren(p, []);
       }
       children.push(sNodes[i]);
     } else {
       r.push(sNodes[i]);
     }
   }
   return r;
 }

最后把返回的数据调用该方法进行处理即可。

getDeptList() {
  list().then(res => {
    console.log(res)
    if (res.status === 200) {
      this.departData = res.data.data
      console.log(this.departData)
      // 将普通数组转化为父子结构的树形
      this.depts = commonApi.transformTozTreeFormat(res.data.data.departmentList)
      console.log(this.depts)
    }
  })
}