如何使用树形组件以及递归转化树形数据

使用element组件

 

data绑定数据，props设置属性

default-expand-all

是否默认展开所有节点

 

 通过在el-tree中传入插槽内容，就可以渲染数据

  <template v-slot="{ data }">
  ..........
  <el-col>{{ data.name }}</el-col>
  .........
   <span class="tree-manager">{{ data.managerName }}</span>

 

1.封装调组织架构数据的接口2.然后按需导入，3.定义方法并调用接口然后用4.created调用方法  

 

 

/**
 *
 * 列表型数据转化树形
*/

export function transListToTreeData(list, rootValue) {
  const arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      // 找到了匹配的节点
      // 当前节点的id 和 当前节点的子节点的pid是想等的
      const children = transListToTreeData(list, item.id) // 找到的节点的子节点
      item.children = children  // 将子节点赋值给当前节点
      arr.push(item)
    }
  })
  return arr
}

 获取完的组织数据使用转化方法转化成树形 并用created调用好自己封装好的方法

  created() {
    this.getDepartment() // 调用获取数据的接口
  },
  methods: {
    // 封装好方法
    async getDepartment() {
      const result = await getDepartment()
      this.depts = transListToTreeData(result, 0)
    }
  }

 

总结：递归特点

• 一般用来处理未知层级的数据

• 递归要有跳出条件

• 自身调用自身时参数不能重复