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: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.fetchDeptTree()
  },
  methods: {
    fetchDeptTree() {
      // 假设 API 返回的数据格式为树形结构
      // 例如：[{ id: 1, name: '总公司', children: [...] }]
      axios.get('/api/dept/tree').then(response => {
        this.deptTree = response.data
      })
    },
    handleNodeClick(data) {
      console.log('点击节点:', data)
    }
  }
}
</script>

递归组件实现自定义树

如果需要更灵活的树形结构，可以创建递归组件：

<template>
  <div class="dept-tree">
    <tree-node
      v-for="node in treeData"
      :key="node.id"
      :node="node"
    ></tree-node>
  </div>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: []
    }
  },
  created() {
    this.fetchTreeData()
  },
  methods: {
    fetchTreeData() {
      axios.get('/api/dept/tree').then(response => {
        this.treeData = response.data
      })
    }
  }
}
</script>

在 TreeNode.vue 中：

<template>
  <div class="tree-node">
    <div @click="toggle">
      {{ node.name }}
    </div>
    <div v-show="isOpen" class="children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :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>

使用第三方树组件库

Vue生态中有多个成熟的树组件库：

1. Vue Draggable Tree - 支持拖拽功能的树组件
2. Vue Tree Select - 树形选择器
3. Vue JsTree - 功能丰富的树组件

安装示例（以 Vue Draggable Tree 为例）：

npm install vue-draggable-tree

使用示例：

<template>
  <vue-draggable-tree
    :data="treeData"
    :allowDrag="allowDrag"
    @change="onTreeChange"
  />
</template>

<script>
import VueDraggableTree from 'vue-draggable-tree'

export default {
  components: { VueDraggableTree },
  data() {
    return {
      treeData: []
    }
  },
  methods: {
    allowDrag(node) {
      return node.level < 3 // 只允许前3级拖动
    },
    onTreeChange(newTree) {
      this.treeData = newTree
    }
  }
}
</script>

后端数据格式建议

部门树通常需要后端返回嵌套的树形结构数据，格式如下：

[
  {
    "id": 1,
    "name": "总公司",
    "children": [
      {
        "id": 2,
        "name": "技术部",
        "children": []
      }
    ]
  }
]

如果后端返回的是扁平数据，可以在前端转换为树形结构：

function buildTree(items, parentId = null) {
  return items
    .filter(item => item.parentId === parentId)
    .map(item => ({
      ...item,
      children: buildTree(items, item.id)
    }))
}

性能优化建议

1. 虚拟滚动 - 对于大型部门树，考虑使用虚拟滚动提高性能
2. 懒加载 - 只在展开节点时加载子节点数据
3. 缓存数据 - 使用 Vuex 或 Pinia 管理树状态，避免重复请求

常见功能扩展

1. 搜索过滤 - 添加搜索框过滤树节点
2. 节点操作 - 实现增删改查部门节点
3. 权限控制 - 根据用户权限显示/隐藏某些节点
4. 多选功能 - 支持同时选择多个部门

以上方法可以根据具体需求选择或组合使用，Element UI 的 Tree 组件适合大多数基础场景，而自定义递归组件则提供更大的灵活性。