这篇文章主要介绍了vue+el-menu如何实现菜单栏无限多层级分类，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
具体内容如下
思路：数据格式须为数组内部多层嵌套模式，利用递归渲染菜单栏数据实现菜单多层级分类。
1.模拟菜单数据，引入封装组件
计算
安全
数据库
网络和加速
企业服务
<template>
<div class="container">
<el-container>
<el-header>Header</el-header>
<el-container class="container-body">
<el-aside class="menu-container">
<!-- 实现菜单多级分类 -->
<el-menu
default-active="1-1-1-1"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<!-- 引入组件 -->
<menu-tree :menuData="menuList"></menu-tree>
</el-menu>
</el-aside>
<el-main class="main-container">Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import MenuTree from '../../components/MentTree'
export default {
components: {
MenuTree
},
data () {
return {
menuList: [
{
index: '1',
icon: 'el-icon-menu',
name: '一级菜单01',
children: [
{
index: '1-1',
icon: 'el-icon-film',
name: '二级菜单01',
children: [
{
index: '1-1-1',
icon: 'el-icon-date',
name: '三级菜单01',
children: [
{
index: '1-1-1-1',
icon: 'el-icon-monitor',
name: '四级菜单01'
}
]
},
{
index: '1-1-2',
icon: 'el-icon-headset',
name: '三级菜单02'
}
]
},
{
index: '1-2',
icon: 'el-icon-data-line',
name: '二级菜单02'
}
]
},
{
index: '2',
icon: 'el-icon-s-data',
name: '一级菜单02'
},
{
index: '3',
icon: 'el-icon-s-operation',
name: '一级菜单03'
},
{
index: '4',
icon: 'el-icon-user',
name: '一级菜单04'
}
]
}
},
mounted () {},
methods: {}
}
</script>2.MenuTree组件内部实现菜单栏递归渲染
<template>
<div>
<template v-for="menu in this.menuData">
<el-submenu :key="menu.index" :index="menu.index" v-if="menu.children">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{menu.name}}</span>
</template>
<menu-tree :menuData="menu.children"></menu-tree>
</el-submenu>
<el-menu-item :key="menu.index" :index="menu.index" v-else>
<i :class="menu.icon"></i>
<span slot="title">{{menu.name}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
props: ['menuData'],
name: 'MenuTree'
}
</script>3.完成效果展示
感谢你能够认真阅读完这篇文章，希望小编分享的“vue+el-menu如何实现菜单栏无限多层级分类”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
