vue实现下拉层级
Vue 实现下拉层级菜单
使用 Vue 实现下拉层级菜单可以通过递归组件或第三方库完成。以下是两种常见方法：
方法一：使用递归组件
递归组件适合处理嵌套层级不确定的数据结构。以下是一个基础实现示例：
<template>
<div>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.name }}
<tree-menu v-if="item.children" :menuData="item.children"></tree-menu>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'TreeMenu',
props: {
menuData: {
type: Array,
required: true
}
}
}
</script>数据格式示例：
menuData: [
{
id: 1,
name: '一级菜单',
children: [
{
id: 2,
name: '二级菜单',
children: [
{ id: 3, name: '三级菜单' }
]
}
]
}
]方法二：使用 Element UI 的 el-menu 组件
如果项目使用 Element UI，可以直接利用其嵌套菜单功能：
<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>样式优化建议
添加 CSS 控制下拉效果：
ul {
list-style: none;
padding-left: 20px;
}
li {
cursor: pointer;
position: relative;
}
li:hover {
background-color: #f5f5f5;
}注意事项
- 递归组件需要设置 name 属性
- 大数据量时考虑性能优化，如虚拟滚动
- 移动端需要添加触摸事件支持
- 可添加 transition 实现平滑动画效果
以上两种方法可根据项目需求选择，递归组件更灵活，Element UI 方案更快速。
