当前位置：首页 > VUE

vue实现部门树

2026-01-14 07:56:53VUE

Vue 实现部门树

数据结构设计

部门树通常采用嵌套的树形结构，每个节点包含 id、name、children 等字段。例如：

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

递归组件实现

使用 Vue 的递归组件可以方便地渲染树形结构。创建一个名为 TreeItem 的组件：

<template>
  <li>
    <div>{{ node.name }}</div>
    <ul v-if="node.children && node.children.length">
      <TreeItem
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    node: Object
  }
}
</script>

主组件调用

在主组件中引入 TreeItem 并传递树形数据：

vue实现部门树

<template>
  <ul>
    <TreeItem :node="treeData" />
  </ul>
</template>

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

export default {
  components: { TreeItem },
  data() {
    return {
      treeData: {
        id: 1,
        name: "总公司",
        children: [
          {
            id: 2,
            name: "技术部",
            children: []
          }
        ]
      }
    }
  }
}
</script>

动态加载数据

如果数据需要从后端获取，可以使用 axios 或 fetch：

methods: {
  async fetchDepartmentTree() {
    const response = await axios.get('/api/departments/tree')
    this.treeData = response.data
  }
},
created() {
  this.fetchDepartmentTree()
}

样式优化

添加 CSS 样式美化树形结构：

vue实现部门树

ul {
  list-style-type: none;
  padding-left: 20px;
}
li {
  margin: 5px 0;
}

交互功能扩展

为节点添加点击事件或展开/折叠功能：

<template>
  <li>
    <div @click="toggle">
      {{ node.name }}
    </div>
    <ul v-if="isExpanded && node.children && node.children.length">
      <TreeItem
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>