vue实现目录树
Vue 实现目录树的方法
递归组件实现
递归组件是 Vue 实现目录树的常见方式。通过组件调用自身，可以处理嵌套的树形结构数据。
<template>
<ul>
<li v-for="item in treeData" :key="item.id">
{{ item.name }}
<tree-node v-if="item.children" :treeData="item.children"></tree-node>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: Array
}
}
</script>使用方式：
<template>
<tree-node :treeData="treeData"></tree-node>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
components: { TreeNode },
data() {
return {
treeData: [
{
id: 1,
name: '节点1',
children: [
{ id: 2, name: '子节点1' },
{ id: 3, name: '子节点2' }
]
}
]
}
}
}
</script>使用第三方库
对于复杂需求，可以考虑使用成熟的第三方库：
vue-tree-list：提供丰富的功能和交互element-ui的el-tree组件（适用于 Element UI 项目）vuetify的v-treeview组件（适用于 Vuetify 项目）
以 element-ui 的 el-tree 为例：
<template>
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [{
label: '一级节点',
children: [{
label: '二级节点'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>动态加载数据
对于大型目录树，可以实现动态加载以提高性能：
<template>
<ul>
<li v-for="item in visibleData" :key="item.id">
<span @click="toggleExpand(item)">
{{ item.expanded ? '▼' : '▶' }} {{ item.name }}
</span>
<tree-node
v-if="item.expanded && item.children"
:treeData="item.children">
</tree-node>
</li>
</ul>
</template>
<script>
export default {
props: ['treeData'],
data() {
return {
visibleData: this.treeData.map(item => ({
...item,
expanded: false
}))
}
},
methods: {
toggleExpand(item) {
item.expanded = !item.expanded
if (item.expanded && !item.children) {
// 这里可以添加异步加载子节点的逻辑
}
}
}
}
</script>样式优化
为目录树添加基本样式：
ul {
list-style-type: none;
padding-left: 20px;
}
li {
margin: 5px 0;
cursor: pointer;
}功能扩展
可以根据需求添加以下功能：
- 节点选择（单选/多选）
- 节点拖拽排序
- 节点增删改
- 搜索过滤
- 懒加载
- 自定义节点内容
每种实现方式都有其适用场景，根据项目需求和复杂度选择最合适的方案。
