vue实现文件目录树
Vue 实现文件目录树的方法
使用 Vue 实现文件目录树可以通过递归组件的方式处理嵌套结构，结合动态数据渲染树形结构。
基本组件结构
创建一个递归组件 DirectoryTree.vue，用于渲染文件和文件夹：
<template>
<ul>
<li v-for="item in treeData" :key="item.name">
<span @click="toggle(item)">
{{ item.isOpen ? '📂' : '📁' }} {{ item.name }}
</span>
<directory-tree
v-if="item.children && item.isOpen"
:tree-data="item.children"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'DirectoryTree',
props: {
treeData: {
type: Array,
required: true
}
},
methods: {
toggle(item) {
if (item.children) {
item.isOpen = !item.isOpen
}
}
}
}
</script>数据格式示例
准备符合递归结构的数据：
const treeData = [
{
name: 'src',
isOpen: false,
children: [
{
name: 'components',
isOpen: false,
children: [
{ name: 'Button.vue' },
{ name: 'Modal.vue' }
]
},
{ name: 'main.js' }
]
},
{ name: 'package.json' }
]在父组件中使用
<template>
<div>
<directory-tree :tree-data="treeData" />
</div>
</template>
<script>
import DirectoryTree from './DirectoryTree.vue'
export default {
components: { DirectoryTree },
data() {
return {
treeData: [...]
}
}
}
</script>进阶功能实现
添加文件图标
根据文件类型显示不同图标：
<template>
<ul>
<li v-for="item in treeData" :key="item.name">
<span @click="toggle(item)">
<template v-if="item.children">
{{ item.isOpen ? '📂' : '📁' }}
</template>
<template v-else>
📄
</template>
{{ item.name }}
</span>
...
</li>
</ul>
</template>异步加载目录内容
实现点击文件夹时异步加载内容：
methods: {
async toggle(item) {
if (item.children) {
if (!item.loaded) {
const res = await fetch(`/api/dir?path=${item.path}`)
item.children = await res.json()
item.loaded = true
}
item.isOpen = !item.isOpen
}
}
}添加样式美化
为目录树添加基本样式：
ul {
list-style: none;
padding-left: 1em;
line-height: 1.8;
}
li {
cursor: pointer;
}
span:hover {
background-color: #f0f0f0;
}使用第三方库
考虑使用现成的 Vue 树形组件库：
-
Vue Tree Component:
npm install vue-tree-component -
Element UI Tree:
npm install element-ui<template> <el-tree :data="treeData" /> </template> -
Vuejs Tree:
npm install vuejs-tree
这些库提供了更多高级功能如拖拽、复选框、搜索等。
