当前位置：首页 > VUE

vue实现机构树

2026-02-19 18:52:18VUE

Vue实现机构树的方法

使用Vue实现机构树可以通过递归组件或第三方库来实现。以下是几种常见的方法：

使用递归组件

递归组件是Vue中实现树形结构的常见方式。通过组件调用自身来渲染嵌套的节点。

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

<script>
export default {
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Child 1',
            children: []
          },
          {
            name: 'Child 2',
            children: [
              {
                name: 'Grandchild',
                children: []
              }
            ]
          }
        ]
      }
    }
  },
  components: {
    TreeNode: {
      props: ['node'],
      template: `
        <div>
          <div>{{ node.name }}</div>
          <tree-node 
            v-for="child in node.children" 
            :node="child" 
            :key="child.name"
          ></tree-node>
        </div>
      `
    }
  }
}
</script>

使用Element UI的Tree组件

Element UI提供了现成的Tree组件，可以快速实现机构树功能。

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

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级机构',
        children: [{
          label: '二级机构',
          children: [{
            label: '三级机构'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

使用Vue递归插槽

Vue的插槽功能也可以用来实现更灵活的树形结构。

<template>
  <tree :data="treeData">
    <template v-slot="{ node }">
      <span>{{ node.name }}</span>
    </template>
  </tree>
</template>

<script>
export default {
  components: {
    Tree: {
      props: ['data'],
      template: `
        <ul>
          <li v-for="node in data" :key="node.id">
            <slot :node="node"></slot>
            <tree v-if="node.children" :data="node.children">
              <template v-slot="{ node }">
                <slot :node="node"></slot>
              </template>
            </tree>
          </li>
        </ul>
      `
    }
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Parent',
          children: [
            {
              id: 2,
              name: 'Child'
            }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方库vue-treeselect

vue-treeselect是一个功能丰富的树形选择组件，适合需要选择功能的机构树。

<template>
  <treeselect
    v-model="value"
    :multiple="true"
    :options="options"
  />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [{
        id: 'a',
        label: '机构A',
        children: [{
          id: 'aa',
          label: '部门A1'
        }]
      }]
    }
  }
}
</script>