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-menudefault-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 实现菜单栏无限多层级分类相关推荐

使用vue+el构建表格_如何使用Vue和VuePress构建文档系统
使用vue+el构建表格介绍 (Introduction) Good documentation is a critical part of a successful project, but a ...
Vue el和data的两种写法
1.5 el 与 data的两种写法 el 有两种写法 1.创建Vue实例对象的时候配置el属性 2.先创建Vue实例,随后再通过vm.$mount('#root')指定 el 的值 data 有两种 ...
vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜 ...
【VUE】微商城（七）----实现分类页面功能
微商城源码微商城后端接口项目以及部署说明包含API接口说明文档 1.分类页面的基本布局 1).分类页面左侧一级分类布局 1.找到CategoryView.vue页面,编写js代码,发送请求获取 ...
php创建多级栏目_PHP 实现无限极栏目分类
首先,创建一个DB CREATE TABLE IF NOT EXISTS `class` ( `id` mediumint(6) NOT NULL AUTO_INCREMENT, `title` va ...
bootstrap树节点如何设置默认不展开_GraPhlAn：最美进化树或层级分类树学习笔记
Graphlan可视化进化树撰文:文涛南京农业的大学责编:刘永鑫中科院遗传发育所 GraPhlAn简介总体来讲,Graphlan是一个可视化进化树和基于分类等级绘制层级分类树的工具.可以制作 ...
工单内容的三个层级分类
工单的定义和使用要求根据公司的不同而不同,但是工单内容里面肯定是记录的问题,这个总没有什么异议,那总不能就一段问题吧,需要对其进行分类.工单的分类是企业来定的,不同企业对于工单的分类不同,这里只能说给 ...
vue实现侧边折叠菜单栏手风琴效果
在我们做管理后台亦或是产品流程时,总是需要一个菜单栏或者导航栏来架起我们的产品架构,那么,如何用vue实现侧边折叠导航栏呢?接下来将一一介绍. 请先看效果演示图. 步骤1:先架构整个页面的布局,撰写h ...
vue菜单点击html,基于vue.js实现侧边菜单栏
侧边菜单栏应该是很多项目里必不可少的自己手写了一个下面是效果图下面就说一下实现的过程还是比较简单的首先导入一下需要的文件接下来就是我的html 主页系统用户管理权限设置操作日志设 ...
Vue 下拉刷新及无限加载组件 - 有你便是晴天 - 博客园
原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...

vue + el-menu 实现菜单栏无限多层级分类

vue + el-menu 实现菜单栏无限多层级分类相关推荐

最新文章

热门文章