当前位置：首页 > VUE

vue实现机构树

2026-01-19 02:29:03VUE

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: 'Grandchild 1', children: [] },
              { name: 'Grandchild 2', children: [] }
            ]
          },
          {
            name: 'Child 2',
            children: []
          }
        ]
      }
    }
  },
  components: {
    TreeNode: {
      props: ['node'],
      template: `
        <div>
          <div>{{ node.name }}</div>
          <tree-node 
            v-for="child in node.children" 
            :key="child.name" 
            :node="child"
          ></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: 'Root',
          children: [
            {
              label: 'Child 1',
              children: [
                { label: 'Grandchild 1' },
                { label: 'Grandchild 2' }
              ]
            },
            {
              label: 'Child 2',
              children: []
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

使用动态加载数据

对于大型机构树，可能需要动态加载子节点数据以减少初始加载时间。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="loadNode"
    lazy
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        resolve([{ label: 'Root', children: [] }])
      } else {
        // 模拟异步加载子节点
        setTimeout(() => {
          resolve([
            { label: 'Child 1', children: [] },
            { label: 'Child 2', children: [] }
          ])
        }, 500)
      }
    }
  }
}
</script>

自定义样式和交互

可以通过 CSS 和事件处理自定义机构树的样式和交互行为。

<template>
  <div class="custom-tree">
    <tree-node 
      v-for="node in treeData" 
      :key="node.id" 
      :node="node"
      @select="handleSelect"
    ></tree-node>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Root',
          children: [
            { id: 2, name: 'Child 1', children: [] },
            { id: 3, name: 'Child 2', children: [] }
          ]
        }
      ]
    }
  },
  methods: {
    handleSelect(node) {
      console.log('Selected node:', node)
    }
  }
}
</script>

<style>
.custom-tree {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

以上方法可以根据具体需求选择或组合使用，实现功能丰富且美观的机构树。

vue实现机构树