当前位置：首页 > VUE

vue树形实现

2026-03-07 00:33:12VUE

Vue 树形组件实现方法

使用递归组件实现树形结构

递归组件是Vue中实现树形结构的常见方式。通过组件调用自身实现无限层级嵌套。

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

<script>
export default {
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: ['node'],
      template: `
        <div>
          <div>{{ node.label }}</div>
          <div v-if="node.children" style="margin-left: 20px">
            <tree-node 
              v-for="child in node.children" 
              :key="child.id" 
              :node="child">
            </tree-node>
          </div>
        </div>
      `
    },
    data() {
      return {
        treeData: {
          id: 1,
          label: '根节点',
          children: [
            {
              id: 2,
              label: '子节点1',
              children: [...]
            }
          ]
        }
      }
    }
  }
}
</script>

使用第三方库

Element UI、Ant Design Vue等UI库提供了现成的树形组件。

Element UI示例：

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

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

虚拟滚动优化大型树

对于大型树结构，可使用vue-virtual-scroller等库优化性能。

<template>
  <RecycleScroller
    :items="flattenTreeData"
    :item-size="32"
    key-field="id"
    v-slot="{ item }">
    <div :style="{ paddingLeft: `${item.level * 20}px` }">
      {{ item.label }}
    </div>
  </RecycleScroller>
</template>

动态加载树节点

实现懒加载提升大型树性能。

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      return resolve([{ label: '根节点' }])
    }
    if (node.level > 3) return resolve([])

    setTimeout(() => {
      const nodes = Array.from({ length: 5 }).map((_, i) => ({
        label: `节点 ${node.level}-${i}`,
        leaf: node.level >= 2
      }))
      resolve(nodes)
    }, 500)
  }
}

树形表格实现

结合el-table实现树形表格。

vue树形实现

<el-table
  :data="tableData"
  row-key="id"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="名称"></el-table-column>
</el-table>

每种方法适用于不同场景，递归组件适合自定义需求，UI库组件提供开箱即用功能，虚拟滚动优化大型数据集性能，动态加载适合远程数据场景。

标签: vue