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"/>
</li>
</ul>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: {
type: Array,
required: true
}
}
}
</script>使用第三方组件库
对于更复杂的需求，可以使用现成的Vue树形组件库：
- Element UI的
el-tree - Vuetify的
v-treeview - Vue Draggable的树形组件
以Element UI为例：
<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>实现可拖拽的目录树
结合vue-draggable可以创建可拖拽排序的树形结构：
<template>
<draggable
v-model="treeData"
group="tree"
@end="onDragEnd">
<div v-for="item in treeData" :key="item.id">
{{ item.name }}
<tree-node
v-if="item.children"
:treeData="item.children"/>
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
props: ['treeData'],
methods: {
onDragEnd() {
// 处理拖拽结束逻辑
}
}
}
</script>添加展开/折叠功能
为目录树添加交互功能：
<template>
<ul>
<li v-for="item in treeData" :key="item.id">
<span @click="toggleExpand(item)">
{{ item.expanded ? '▼' : '▶' }} {{ item.name }}
</span>
<tree-node
v-if="item.children && item.expanded"
:treeData="item.children"/>
</li>
</ul>
</template>
<script>
export default {
props: ['treeData'],
methods: {
toggleExpand(item) {
this.$set(item, 'expanded', !item.expanded)
}
}
}
</script>样式优化
为目录树添加基础样式：
ul {
list-style: none;
padding-left: 20px;
}
li {
cursor: pointer;
padding: 5px 0;
}
li span:hover {
background-color: #f5f5f5;
}以上方法可以根据实际需求组合使用，构建功能完善、交互友好的Vue目录树组件。
