Vue学习笔记(四)：树形结构

组织架构----树形结构布局

一个企业的组织架构是这个企业的灵魂, 组织架构常采用树形金字塔式结构来构建

采用 element 中的 tree组件 可以实现树形结构, 用清晰的层级结构展示信息

获取组织结构数据并处理

先封装一个获取获取组织结构数据的请求, 然后封装一个方法调用该请求, 再在 created() 函数中调用这个方法,从后台获取数据的数据是数组的形式,需要转化为树形结构

通过对后台数据的分析, 可以看出每个数据对象都有两个id值, 一个id值表示自身, 另一个id值表示自身的父节点, 当表示自身父节点的这个值为空时, 说明这个数据对象是一级结构, 那么就可以通过递归算法来将数据转化为树形结构

第一种写法：

function tranListToTreeData(list,pid){
  var arr = [];
  list.forEach(item => {
    //  进到 if 里的都是一级数据(pid:'')
    if(item.pid === pid) { 
    //  判断一级数据的id有没有其他人作为pid, 如果有就说明这个一级是有二级目录的
      const children = tranListToTreeData(list,item.id);
      if(children.length>0) {
        item.children = children
      }
      arr.push(item)
    }
  })
  return arr
}

第二种写法：

export function tranListToTreeData(list, pid) {
  return list.filter(item => {
    //  进到 if 里的都是一级数据(pid:'')
    if (item.pid === pid) {
      //  判断一级数据的id有没有其他人作为pid, 如果有就说明这个一级是有二级目录的
      item.children = tranListToTreeData(list, item.id)
      return true
    }
  })
}