vue实现层级目录
Vue 实现层级目录的方法
递归组件实现
递归组件是 Vue 中实现层级目录的常见方式。通过组件调用自身，可以动态渲染多层嵌套结构。
<template>
<div>
<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>
</div>
</template>
<script>
export default {
name: 'TreeNode',
props: {
treeData: {
type: Array,
required: true
}
}
}
</script>动态组件实现
通过动态组件和计算属性，可以实现层级目录的渲染。
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
<span @click="toggle(item)">{{ item.name }}</span>
<tree-folder-contents v-if="item.children && item.expanded" :children="item.children"></tree-folder-contents>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['children'],
methods: {
toggle(item) {
item.expanded = !item.expanded
}
}
}
</script>使用 Vuex 管理状态
对于复杂的层级目录，可以使用 Vuex 来管理展开/折叠状态。
// store.js
export default new Vuex.Store({
state: {
treeData: [],
expandedItems: []
},
mutations: {
toggleItem(state, itemId) {
const index = state.expandedItems.indexOf(itemId)
if (index === -1) {
state.expandedItems.push(itemId)
} else {
state.expandedItems.splice(index, 1)
}
}
}
})样式优化
为层级目录添加适当的样式可以提升用户体验。
ul {
list-style-type: none;
padding-left: 20px;
}
li {
cursor: pointer;
margin: 5px 0;
}
li span:hover {
background-color: #f0f0f0;
}性能优化
对于大型层级目录，可以使用虚拟滚动来提高性能。
import { VirtualList } from 'vue-virtual-scroll-list'
export default {
components: {
VirtualList
},
// ...
}完整示例
<template>
<div>
<tree-node :nodes="treeData"></tree-node>
</div>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
components: {
TreeNode
},
data() {
return {
treeData: [
{
id: 1,
name: 'Folder 1',
children: [
{
id: 2,
name: 'Subfolder 1',
children: []
}
]
}
]
}
}
}
</script>这些方法可以根据具体需求进行组合和调整，实现不同复杂度的层级目录功能。
