当前位置：首页 > VUE

vue实现树目录

2026-03-07 20:30:16VUE

vue实现树目录的方法

使用Vue实现树目录可以通过递归组件或第三方库完成。以下是几种常见方法：

递归组件实现

创建一个递归组件，通过组件自身调用自身实现无限层级树结构。

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

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

在主组件中引入并使用：

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

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '父节点',
          children: [
            { id: 2, name: '子节点1' },
            { id: 3, name: '子节点2' }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方库

对于复杂需求，可以使用成熟的树形组件库：

Element UI Tree
安装Element UI后直接使用：

<el-tree :data="treeData" :props="defaultProps"></el-tree>

<script>
export default {
  data() {
    return {
      treeData: [/* 数据格式需符合Element要求 */],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
}
</script>

Vue Draggable Tree
支持拖拽功能的树组件：

npm install vue-draggable-nested-tree

<draggable-tree :data="treeData"/>

动态加载数据

对于大数据量树目录，可以实现懒加载：

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

    // 模拟异步加载
    setTimeout(() => {
      resolve([
        { name: '子节点' + new Date().getTime() },
        { name: '子节点' + new Date().getTime() }
      ]);
    }, 500);
  }
}

样式优化

为树目录添加基础样式：

vue实现树目录

ul {
  list-style-type: none;
  padding-left: 20px;
}
li {
  margin: 5px 0;
  cursor: pointer;
}

功能扩展

添加复选框：

<el-tree show-checkbox node-key="id" :data="treeData"/>

自定义节点内容：

<el-tree :data="treeData">
  <template #default="{ node }">
    <span>{{ node.label }}</span>
    <el-button size="mini">操作</el-button>
  </template>
</el-tree>

以上方法可根据实际需求选择使用，递归组件适合自定义程度高的场景，而第三方库能快速实现复杂功能。