当前位置：首页 > VUE

vue实现递归目录

2026-02-18 16:44:31VUE

Vue 实现递归目录的方法

在 Vue 中实现递归目录通常需要结合组件的递归调用，以下是一种常见的实现方式：

基础递归组件实现

创建递归组件时，组件需要能够调用自身。假设目录数据是一个树形结构，可以这样实现：

vue实现递归目录

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

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

处理目录数据

确保传递给组件的数据是嵌套结构，例如：

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

添加交互功能

可以为目录添加展开/折叠功能：

vue实现递归目录

<template>
  <div>
    <ul>
      <li v-for="item in treeData" :key="item.id">
        <span @click="toggle(item)">{{ item.name }}</span>
        <recursive-directory 
          v-if="item.children && item.expanded" 
          :treeData="item.children" 
        />
      </li>
    </ul>
  </div>
</template>

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

样式优化

添加一些基础样式改善视觉效果：

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

性能考虑

对于大型目录树，可以考虑以下优化：

使用虚拟滚动只渲染可见部分
添加懒加载功能，只在展开时加载子目录
对不变的目录分支使用 v-once 指令

完整示例

<template>
  <div class="directory">
    <ul>
      <li v-for="item in treeData" :key="item.id">
        <div class="directory-item" @click="toggle(item)">
          <span>{{ item.name }}</span>
          <span v-if="item.children">
            {{ item.expanded ? '▼' : '▶' }}
          </span>
        </div>
        <recursive-directory 
          v-if="item.children && item.expanded" 
          :treeData="item.children" 
        />
      </li>
    </ul>
  </div>
</template>

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

<style>
.directory {
  font-family: Arial, sans-serif;
}
.directory ul {
  list-style-type: none;
  padding-left: 20px;
}
.directory li {
  margin: 5px 0;
}
.directory-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.directory-item span:first-child {
  margin-right: 5px;
}
</style>

这种实现方式可以处理任意深度的目录结构，同时提供了基本的交互功能。根据实际需求，可以进一步扩展功能，如添加右键菜单、拖拽排序等。