当前位置：首页 > VUE

vue实现目录树

2026-02-16 23:02:35VUE

Vue 实现目录树的方法

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

递归组件是 Vue 中实现目录树的常见方法。通过组件调用自身，可以动态渲染嵌套的树形结构。

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

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Child 1',
            children: [
              { name: 'Grandchild 1' },
              { name: 'Grandchild 2' }
            ]
          },
          {
            name: 'Child 2'
          }
        ]
      }
    }
  }
}
</script>

在 TreeNode.vue 中实现递归：

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

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

使用第三方库

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

Vue-Tree-Chart：适用于可视化树形结构
```
npm install vue-tree-chart
```
Vuejs-Tree：功能丰富的树形组件
```
npm install vuejs-tree
```
Element UI Tree：如果使用 Element UI，可以直接使用其 Tree 组件
```
<el-tree :data="data"></el-tree>
```

动态加载数据

对于大型目录树，可以实现动态加载子节点：

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

    // 模拟异步加载
    setTimeout(() => {
      const nodes = Array.from({ length: 3 }).map((_, i) => ({
        name: `Child ${i + 1}`,
        hasChildren: true
      }))
      resolve(nodes)
    }, 500)
  }
}

添加交互功能

增强目录树的用户体验：

data() {
  return {
    defaultProps: {
      children: 'children',
      label: 'name'
    },
    currentNode: null
  }
},
methods: {
  handleNodeClick(data) {
    this.currentNode = data
  },
  filterNode(value, data) {
    if (!value) return true
    return data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
  }
}

样式定制

通过 CSS 美化目录树：

vue实现目录树

.tree-node {
  padding: 5px 10px;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #f5f5f5;
}

.tree-children {
  margin-left: 20px;
  border-left: 1px dashed #ccc;
}

以上方法可以根据具体需求组合使用，实现功能完善且美观的 Vue 目录树组件。