当前位置：首页 > VUE

vue实现无限级目录

2026-02-22 14:53:55VUE

实现无限级目录的方法

在Vue中实现无限级目录通常使用递归组件的方式。递归组件允许组件在其模板中调用自身，非常适合处理树形结构数据。

基础递归组件实现

创建递归组件需要定义一个能够调用自身的组件，并正确处理数据的传递。

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
      <tree-menu v-if="item.children && item.children.length" :list="item.children"/>
    </li>
  </ul>
</template>

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

数据格式要求

递归组件需要特定格式的数据，通常是一个包含children属性的对象数组。

const treeData = [
  {
    id: 1,
    name: '目录1',
    children: [
      {
        id: 2,
        name: '子目录1',
        children: []
      }
    ]
  }
]

添加交互功能

可以为递归组件添加展开/折叠功能，增强用户体验。

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      <div @click="toggle(item)">
        {{ item.name }}
        <span v-if="item.children && item.children.length">
          {{ item.expanded ? '-' : '+' }}
        </span>
      </div>
      <tree-menu 
        v-if="item.children && item.children.length && item.expanded" 
        :list="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

性能优化建议

对于大型树形结构，可以考虑以下优化措施：

使用虚拟滚动技术只渲染可见节点添加懒加载功能，当节点展开时才加载子节点为节点添加唯一key，帮助Vue高效更新DOM

vue实现无限级目录

完整组件示例

<template>
  <div class="tree-container">
    <tree-menu :list="treeData" />
  </div>
</template>

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

export default {
  components: {
    TreeMenu
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '根目录',
          expanded: true,
          children: [
            {
              id: 2,
              name: '子目录1',
              children: []
            }
          ]
        }
      ]
    }
  }
}
</script>

<style>
.tree-container ul {
  list-style: none;
  padding-left: 20px;
}
.tree-container li {
  margin: 5px 0;
  cursor: pointer;
}
</style>