vue层级菜单实现
Vue 层级菜单实现方法
使用递归组件实现嵌套菜单
递归组件是处理层级菜单的常见方式，通过组件调用自身实现无限层级嵌套。
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.name }}
<menu-item v-if="item.children" :menuData="item.children"></menu-item>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menuData: Array
}
}
</script>数据结构示例
const menuData = [
{
id: 1,
name: '一级菜单',
children: [
{
id: 2,
name: '二级菜单',
children: [
{ id: 3, name: '三级菜单' }
]
}
]
}
]添加交互功能
通过v-show或v-if控制子菜单显示隐藏，添加点击事件切换状态。
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
<div @click="toggleChildren(item)">
{{ item.name }}
<span v-if="item.children">{{ item.isOpen ? '-' : '+' }}</span>
</div>
<menu-item
v-if="item.children && item.isOpen"
:menuData="item.children"
></menu-item>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menuData: Array
},
methods: {
toggleChildren(item) {
this.$set(item, 'isOpen', !item.isOpen)
}
}
}
</script>使用第三方UI库
Element UI、Ant Design Vue等提供了现成的菜单组件。
<el-menu>
<el-submenu v-for="item in menuData" :key="item.id" :index="item.id">
<template slot="title">{{ item.name }}</template>
<el-menu-item
v-for="child in item.children"
:key="child.id"
:index="child.id"
>
{{ child.name }}
</el-menu-item>
</el-submenu>
</el-menu>样式优化建议
- 为不同层级菜单添加缩进样式
- 使用过渡动画提升用户体验
- 添加hover效果提高交互性
- 确保菜单在移动设备上的可用性
性能优化考虑
- 大数据量时使用虚拟滚动
- 避免深度过大的嵌套结构
- 对静态菜单数据使用keep-alive缓存
