当前位置：首页 > VUE

vue实现tree

2026-01-13 01:12:31VUE

Vue 实现 Tree 组件

在 Vue 中实现 Tree 组件可以通过递归组件或第三方库来完成。以下是两种常见方法：

递归组件实现

递归组件适合处理嵌套的树形数据。定义一个组件，该组件能够调用自身来渲染子节点。

<template>
  <div>
    <div @click="toggle">
      {{ node.name }}
    </div>
    <div v-if="isOpen" v-for="child in node.children" :key="child.id">
      <tree-node :node="child"></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

使用第三方库

Vue 生态中有成熟的 Tree 组件库，例如 vue-tree-list 或 element-ui 的 Tree 组件。

安装 element-ui：

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

动态加载数据

对于大型树结构，可以采用动态加载数据的方式优化性能。

<el-tree
  :load="loadNode"
  lazy
></el-tree>

<script>
export default {
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ label: '根节点' }])
      }
      setTimeout(() => {
        resolve([
          { label: '子节点' }
        ])
      }, 500)
    }
  }
}
</script>

自定义节点内容

可以通过插槽自定义树节点的显示内容。

<el-tree :data="treeData">
  <span slot-scope="{ node, data }">
    <span>{{ node.label }}</span>
    <span>{{ data.description }}</span>
  </span>
</el-tree>