vue-element-admin-master二级路由三级菜单显示的改进
2018-01-25 10:36
2276 查看
原项目菜单嵌套对应的路由嵌套
但实际项目中路由只有两级,菜单有三级,
第二级路由的功能要实现分组或子分类的功能,在菜单中实现三级
实现思路:
在上一篇中实现从服务器端动态得到路由后src/store/modules/permission.js文件中判断实际vue组件是否存在,如果存在则生成路由,存入到src/store/index.js getters routers:
state => state.permission.routers 中备用
动态获取的路由,带一参数groupName,如果此参数相同,则代表要生成三级菜单
然后在src/views/layout/Sidebar 生成菜单时,从state.permission.routers中获取路由,判断groupName是否相同,生成新的三级数组,供菜单生成使用
二级路由生成三级菜单代码如下:
菜单组件模板的嵌套删除掉,直接生成三级菜单
但实际项目中路由只有两级,菜单有三级,
第二级路由的功能要实现分组或子分类的功能,在菜单中实现三级
实现思路:
在上一篇中实现从服务器端动态得到路由后src/store/modules/permission.js文件中判断实际vue组件是否存在,如果存在则生成路由,存入到src/store/index.js getters routers:
state => state.permission.routers 中备用
动态获取的路由,带一参数groupName,如果此参数相同,则代表要生成三级菜单
然后在src/views/layout/Sidebar 生成菜单时,从state.permission.routers中获取路由,判断groupName是否相同,生成新的三级数组,供菜单生成使用
二级路由生成三级菜单代码如下:
newmenu: function () { //let newmenuarray = [] //将二级路由 分隔,然后二级中有分组的合并为三级,供菜单 使用 let newmenuarray = this.$store.getters.store_all_routers; newmenuarray.map(function (itemmenu, itemIndex) { let menu_temp_child_noGroup = []//无分组 let menu_temp_child_useGroup = []//有分组 if (itemmenu.children && itemmenu.children != '') { itemmenu.children.map(function (childmenu, childIndex) { if (childmenu.groupName == '') { menu_temp_child_noGroup.push(childmenu) } let tempaaaa = [] tempaaaa = arrCheck(itemmenu.children) if (tempaaaa != "") { //console.log(tempaaaa) menu_temp_child_useGroup = tempaaaa } }) itemmenu.children = "" itemmenu.children_noGroup = menu_temp_child_noGroup itemmenu.children_useGroup = menu_temp_child_useGroup } }) return newmenuarray },
//将相同的分组名称的数据 重新编组合并 function arrCheck(arr) { //console.log(arr.length) var newArr = [] var temp = "" for (var i = 0; i < arr.length; i++) { var temp_arr = [] temp = arr[i].groupName; if (temp) { for (var j = 0; j < arr.length; j++) { if (arr[j].groupName == temp) { temp_arr.push(arr[j]) arr[j] = -1; } } if (temp != -1) { newArr.push(temp_arr) } } } return newArr }
菜单组件模板的嵌套删除掉,直接生成三级菜单
<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF"> <template> <div class="menu-wrapper"> <template v-for="item in newmenu" v-if="!item.hidden"> <el-submenu :index="item.name||item.path" :key="item.name"> <template slot="title"> <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon> <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span> </template> <!--第二层的连接--> <template v-for="child in item.children_noGroup" v-if="!child.hidden"> <router-link :to="{path:item.path+'/'+child.path+'?'+child.querystring}" :key="child.name" v-if=""> <el-menu-item :index="item.path+'/'+child.path"> <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span> </el-menu-item> </router-link> </template> <!--<!--第三层的连接--> <div v-for="child in item.children_useGroup" class="menu-wrapper nest-menu" v-if="!child.hidden"> <el-submenu :index="child[0].name||child[0].path" :key="child[0].name"> <template slot="title"> <span>{{child[0].groupName}}</span> </template> <template v-for="child2 in child" v-if="!child2.hidden"> <!-- <router-link :to="{path:item.path+'/'+child2.path,query:{typeid:child2.queryValue}}" :key="child2.name"> --> <router-link :to="{path:item.path+'/'+child2.path+'?'+child2.querystring}" :key="child2.name"> <el-menu-item :index="item.path+'/'+child2.path"> <span v-if="child2.meta&&child2.meta.title">{{child2.meta.title}}</span> </el-menu-item> </router-link> </template> </el-submenu> </div> </el-submenu> </template> </div> </template> </el-menu>
相关文章推荐
- vue-element-admin-master后端动态获取路由的改进
- 解决 asp.net 中如果 Menu 控件放在 MasterPage 中, IE6 会出现的二级菜单不能正确显示的问题
- vue.js 左侧二级菜单显示隐藏切换 实例
- Vue iview-admin框架二级菜单改为三级菜单的方法
- vue.js 左侧二级菜单显示与隐藏切换的实例代码
- javascript鼠标滑过显示二级菜单特效
- 二级菜单,移入显示隐藏
- Python+Selenium 操作示例——鼠标悬停显示二级菜单,再点击二级菜单或下拉列表
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)(2)
- vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
- jquery 省市级联菜单特效(省市区三级级联和省市二级级联)
- 一个二级树形菜单,初始显示为全部展开,适用于分类较少的情况。
- 二级分类菜单横排显示方法
- 菜单导航 Mmenu 移动网站的抽屉式菜单,支持查询、个数显示、搜索、二级菜单
- vue二级路由设置
- Ecshop中导航栏中使用二级菜单显示并调用子分类
- 鼠标悬浮显示二级菜单效果的jquery实现
- AjaxPro 实现 三级联动菜单时,出现二级select 闪烁问题
- vue基于element-ui的三级CheckBox复选框功能的实现代码
- dede 三级和二级菜单的联动SQL调用