黑马程序员Vue（5）——iHRM人力资源后台管理

AAA码农烧烤

于 2024-02-13 11:04:55 发布

阅读量828

点赞数 7

分类专栏： Vue前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wn030416/article/details/136105682

版权

树形组件

Tree 树形控件 | Element Plus (element-plus.org)

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

添加子部门

弹层

methods: {
    // 封装好方法
    async getDepartment() {
      const result = await getDepartment()
      this.depts = transListToTreeData(result, 0)
    },
    // 操作部门方法
    operateDept(type, id) {
      if (type === 'add') {
        // 添加子部门
        this.showDialog = true // 显示弹层
        this.currentNodeId = id
      } else if (type === 'edit') {
        // 编辑部门场景
        this.showDialog = true
        this.currentNodeId = id // 记录id 要用它获取数据