vue+el-menu如何实现菜单栏无限多层级分类
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍了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如何实现菜单栏无限多层级分类”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341