将数组数据转化成树形结构

将数组数据转化成树形结构以便于操作带有层级的下拉选项

数据结构

 

观察相对应的结构

要将列表型的数据转化成树形数据，需要用到递归算法  

思路

找树形结构的字段

id   pid比较合适

再发现   没有子节点的pid为空   有子节点的 pid 是父节点的id

例如  当id=1  pid=''

id=2   pid=1   也就是id=1的下面有子节点,  

id=3  pid=2   id=2下面有子节点     甚至id=4   pid=2  也就是有节点

上重点

封装一个方法  

/** *
 *
 *  将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样， 否则就会死循环
 *  遍历树形 有一个重点 要先找一个头儿
 * ***/
export function tranListToTreeData(list, rootValue) {
//定义个空数组接收参数
  var arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      // 找到之后 就要去找 item 下面有没有子节点
      //条件不能是(list, rootValue),否则死递归
      const children = tranListToTreeData(list, item.id)
      if (children.length) {
        // 如果children的长度大于0 说明找到了子节点
        item.children = children
      }
      arr.push(item) // 把找到的数据内容加入到数组中
    }
  })
//返回这个数组
  return arr
}

可以遍历n层的数据  进行转化

调用的时候开始一定要记得  pid的最开始是空的  ''   

   this.xxxx= tranListToTreeData(result.depts, '')

调试来看,  第一次的list数组,rootValue是个空  ''  循环list    然后找pid=''的数据

找到后 再次调用自身的方法 → 传过去list的数组→  但是item.id已经过去到id的信息了   → 也就是id=1的例子  → 上面的红色字体    → 然后再次循环 → 判断 item.pid等于这个id吗? 此时的id等于一串字符串,pid依旧是空→ 一直等到循环找到一样的为止,然后最初得rootValue变成了id ,也就是说找到了子节点,→  if (children.length){}判断有结果,→将得到的数据加入到arr中,以此循环,并且返回出来这个arr,