vue实现部门树

Vue 实现部门树的方法

使用 Element UI 的 Tree 组件

Element UI 提供了 Tree 组件，可以方便地实现部门树的展示。以下是一个简单的示例代码：

<template>
  <el-tree
    :data="deptTree"
    :props="defaultProps"
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      deptTree: [
        {
          label: '一级部门',
          children: [
            {
              label: '二级部门1',
              children: [
                { label: '三级部门1' },
                { label: '三级部门2' }
              ]
            },
            {
              label: '二级部门2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

使用递归组件实现自定义树

如果需要更灵活的定制，可以自己实现递归组件：

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        name: '总公司',
        children: [
          {
            name: '分公司1',
            children: [
              { name: '部门A' },
              { name: '部门B' }
            ]
          },
          {
            name: '分公司2'
          }
        ]
      }
    }
  }
}
</script>

TreeNode.vue 组件：

<template>
  <div>
    <div @click="toggle">
      {{ node.name }}
    </div>
    <div v-show="isOpen" v-if="node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.name"
        :node="child"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

从后端获取数据并构建树结构

通常部门数据是从后端API获取的，需要处理后转换为树形结构：

// 假设从后端获取的是平铺的部门列表
function buildTree(items, id = null, link = 'parentId') {
  return items
    .filter(item => item[link] === id)
    .map(item => ({ ...item, children: buildTree(items, item.id) }))
}

// 在Vue组件中使用
export default {
  data() {
    return {
      deptList: [],
      deptTree: []
    }
  },
  async created() {
    const res = await axios.get('/api/departments')
    this.deptList = res.data
    this.deptTree = buildTree(this.deptList)
  }
}

添加交互功能

可以为树组件添加更多交互功能，如复选框、懒加载等：

<el-tree
  :data="deptTree"
  show-checkbox
  node-key="id"
  lazy
  :load="loadNode"
></el-tree>

<script>
export default {
  methods: {
    async loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        const res = await axios.get('/api/departments/root')
        return resolve(res.data)
      }
      // 加载子节点
      const res = await axios.get(`/api/departments/children/${node.key}`)
      resolve(res.data)
    }
  }
}
</script>

样式定制

可以通过CSS对树组件进行样式定制：

.el-tree {
  background: #f5f7fa;
}

.el-tree-node__content {
  height: 40px;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #e6f7ff;
}

以上方法提供了多种实现部门树的方案，可以根据项目需求选择合适的实现方式。