当前位置：首页 > VUE

vue树形实现

2026-01-07 08:40:06VUE

Vue 树形组件实现方法

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

递归组件是 Vue 中实现树形结构的常见方法。通过组件调用自身的方式，可以轻松构建多层嵌套的树形结构。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.label }}
      <tree-node v-if="item.children" :treeData="item.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用成熟的第三方树形组件库：

Element UI 的 el-tree
Ant Design Vue 的 a-tree
Vue Draggable 的可拖拽树形组件

<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>

实现树形表格

结合表格展示树形数据时，可以使用 row-key 和 tree-props 属性：

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>

性能优化技巧

对于大型树形数据，可采用虚拟滚动技术优化性能：

import { VirtualTree } from 'vue-virtual-scroll-tree'

export default {
  components: {
    VirtualTree
  },
  data() {
    return {
      treeData: largeTreeData
    }
  }
}

自定义树形节点内容

通过作用域插槽可以完全自定义树形节点的渲染内容：

vue树形实现

<el-tree :data="data">
  <template #default="{ node, data }">
    <span class="custom-node">
      <i :class="data.icon"></i>
      {{ node.label }}
      <el-button size="mini" @click="append(data)">添加</el-button>
    </span>
  </template>
</el-tree>

树形数据操作

实现常见的树形数据操作功能：

methods: {
  addNode(parent, newNode) {
    if (!parent.children) {
      this.$set(parent, 'children', [])
    }
    parent.children.push(newNode)
  },
  removeNode(treeData, node) {
    const index = treeData.findIndex(item => item.id === node.id)
    if (index !== -1) {
      treeData.splice(index, 1)
    } else {
      treeData.forEach(item => {
        if (item.children) {
          this.removeNode(item.children, node)
        }
      })
    }
  }
}

树形数据扁平化处理

将嵌套的树形数据转换为扁平数组便于操作：

function flattenTree(tree, result = []) {
  tree.forEach(node => {
    result.push(node)
    if (node.children) {
      flattenTree(node.children, result)
    }
  })
  return result
}

标签: vue