当前位置：首页 > VUE

vue 实现文件目录

2026-02-11 06:06:05VUE

使用 Vue 实现文件目录

Vue 可以通过递归组件或第三方库实现文件目录结构。以下是两种常见方法：

递归组件实现

递归组件适合展示嵌套的目录结构。通过组件调用自身实现无限层级渲染。

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

<script>
export default {
  name: 'FileTree',
  props: {
    treeData: Array
  },
  methods: {
    toggle(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>

数据格式示例：

treeData: [
  {
    name: '文件夹1',
    expanded: false,
    children: [
      { name: '文件1.txt' },
      { name: '文件2.txt' }
    ]
  }
]

使用第三方库

对于更复杂的需求，可以使用专门处理树形结构的库：

vue 实现文件目录

vue-tree-list：提供拖拽、复选框等功能
```
npm install vue-tree-list
```

element-ui 的树形组件

vue 实现文件目录

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

动态加载目录

对于大型目录结构，可以实现懒加载：

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

    setTimeout(() => {
      const data = Array.from({ length: 5 }).map((_, i) => ({
        name: `节点${node.level}-${i}`,
        hasChildren: true
      }))
      resolve(data)
    }, 500)
  }
}

样式优化

添加CSS增强视觉效果：

ul {
  list-style-type: none;
  padding-left: 20px;
}
li {
  cursor: pointer;
  padding: 5px;
}
li:hover {
  background-color: #f5f5f5;
}

完整功能实现

结合上下文菜单、图标等完整功能：

<template>
  <div>
    <ul>
      <li v-for="item in treeData" 
          :key="item.id"
          @contextmenu.prevent="openMenu($event, item)">
        <i :class="getIcon(item)"></i>
        {{ item.name }}
        <context-menu v-if="showMenu" 
                     :position="menuPosition"
                     :item="selectedItem"
                     @close="showMenu = false"/>
        <file-tree v-if="item.children && item.expanded" 
                  :treeData="item.children"/>
      </li>
    </ul>
  </div>
</template>

这种方法可以扩展出完整的文件管理器功能，包括重命名、删除、新建等操作。根据具体需求选择简单递归组件或功能完善的第三方解决方案。