这篇文章主要介绍“element怎么实现二级菜单和顶部导航联动”，在日常操作中，相信很多人在element怎么实现二级菜单和顶部导航联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”element怎么实现二级菜单和顶部导航联动”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
目前
原本数据结构
const users = [{id: 1,username: 'normal',password: 'normal',token: 'abcdefghijklmnopqrstuvwxyz',leftMenus: [{title: '用户管理',key: '/user',name: 'user',icon: 'el-icon-user-solid',rights: ['view', 'edit', 'add', 'delete']},{title: '商品管理',key: '/products',name: 'products',icon: 'el-icon-s-goods',children: [{title: '品类管理',key: '/category',name: 'category',icon: 'el-icon-s-ticket',rights: ['view', 'edit', 'add', 'delete']},{title: '商品生产',key: '/product',name: 'product',icon: 'el-icon-s-promotion',rights: ['view', 'edit', 'add', 'delete']}]},{title: '图形图表',key: '/charts',name: 'charts',icon: 'el-icon-picture',children: [{title: '柱线图',key: '/charts/bar',name: 'bar',icon: 'el-icon-s-data',rights: ['view', 'edit', 'add', 'delete']},{title: '折线图',key: '/charts/line',name: 'line',icon: 'el-icon-s-marketing',rights: ['view', 'edit', 'add', 'delete']},{title: '饼图',key: '/charts/pie',name: 'pie',icon: 'el-icon-s-help',rights: ['view', 'edit', 'add', 'delete']},]}]},{id: 2,username: 'admin',password: 'admin',token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),leftMenus: [{title: '用户管理',key: '/user',name: 'user',icon: 'el-icon-user-solid',rights: ['view', 'edit', 'add', 'delete']},{title: '商品管理',key: '/products',name: 'products',icon: 'el-icon-s-goods',children: [{title: '品类管理',key: '/category',name: 'category',icon: 'el-icon-s-ticket',rights: ['view', 'edit', 'add', 'delete']},{title: '商品生产',key: '/product',name: 'product',icon: 'el-icon-s-promotion',rights: ['view', 'edit', 'add', 'delete']}]},{title: '角色管理',key: '/role',name: 'role',icon: 'el-icon-s-custom',rights: ['view', 'edit', 'add', 'delete']},{title: '图形图表',key: '/charts',name: 'charts',icon: 'el-icon-picture',children: [{title: '柱线图',key: '/charts/bar',name: 'bar',icon: 'el-icon-s-data',rights: ['view', 'edit', 'add', 'delete']},{title: '折线图',key: '/charts/line',name: 'line',icon: 'el-icon-s-marketing',rights: ['view', 'edit', 'add', 'delete']},{title: '饼图',key: '/charts/pie',name: 'pie',icon: 'el-icon-s-help',rights: ['view', 'edit', 'add', 'delete']},]}]}]因为新增顶部导航，所以要重新构建数据结构 。
修改后的数据结构
const users = [{id: 1,username: 'normal',password: 'normal',token: 'abcdefghijklmnopqrstuvwxyz',navBar: {active: '0',list: [{name: "首页",subActive: '0',leftMenus: [{id: 1,title: '用户管理1',key: '/user',name: 'user',icon: 'el-icon-user-solid',rights: ['view', 'edit', 'add', 'delete']},{id: 2,title: '商品管理',name: 'products',icon: 'el-icon-s-goods',children: [{id: 21,title: '品类管理',key: '/category',name: 'category',icon: 'bars',rights: ['view', 'edit', 'add', 'delete']},{id: 22,title: '商品生产',key: '/product',name: 'product',icon: 'tool',rights: ['view', 'edit', 'add', 'delete']}]},{id: 4,title: '图形图表',name: 'charts',icon: 'el-icon-s-platform',children: [{id: 41,title: '柱线图',key: '/charts/bar',name: 'bar',icon: 'el-icon-s-data',rights: ['view', 'edit', 'add', 'delete']},{id: 42,title: '折线图',key: '/charts/line',name: 'line',icon: 'el-icon-s-marketing',rights: ['view', 'edit', 'add', 'delete']},{id: 43,title: '饼图',key: '/charts/pie',name: 'pie',icon: 'el-icon-s-help',rights: ['view', 'edit', 'add', 'delete']},]}]},{name: "商品",subActive: '0',leftMenus: [{id: 1,title: '用户管理2',key: '/user2',name: 'user2',icon: 'el-icon-user-solid',rights: ['view', 'edit', 'add', 'delete']}]},{name: "订单",subActive: '0',leftMenus: [{id: 32,title: '订单管理',key: '/dingg',name: 'dingg',icon: 'el-icon-user-solid',rights: ['view', 'edit', 'add', 'delete']},{id: 34,title: '订单统计',name: 'ding',icon: 'el-icon-user-solid',children: [{id: 35,title: '订单汇总',key: '/ding/hui',name: 'dinghui',icon: 'el-icon-s-data',rights: ['view', 'edit', 'add', 'delete']}, ]} ]},{name: "会员"},{name: "设置"},]}},{id: 2,username: 'admin',password: 'admin',token: 'abcdefghijklmnopqrstuvwxyz'.split('').reverse().join(''),leftMenus: [{id: 1,title: '用户管理',key: '/user',name: 'user',icon: 'el-icon-user-solid',rights: ['view', 'edit', 'add', 'delete']},{id: 2,title: '商品管理',key: '/products',name: 'products',icon: 'el-icon-s-goods',children: [{id: 21,title: '品类管理',key: '/category',name: 'category',icon: 'bars',rights: ['view', 'edit', 'add', 'delete']},{id: 22,title: '商品生产',key: '/product',name: 'product',icon: 'tool',rights: ['view', 'edit', 'add', 'delete']}]},{id: 3,title: '角色管理',key: '/role',name: 'role',icon: 'el-icon-s-custom',rights: ['view', 'edit', 'add', 'delete']},{id: 4,title: '图形图表',key: '/charts',name: 'charts',icon: 'el-icon-s-platform',children: [{id: 41,title: '柱线图',key: '/charts/bar',name: 'bar',icon: 'el-icon-s-data',rights: ['view', 'edit', 'add', 'delete']},{id: 42,title: '折线图',key: '/charts/line',name: 'line',icon: 'el-icon-s-marketing',rights: ['view', 'edit', 'add', 'delete']},{id: 43,title: '饼图',key: '/charts/pie',name: 'pie',icon: 'el-icon-s-help',rights: ['view', 'edit', 'add', 'delete']},]}]}]头部布局
<div class="header-right"><el-menu :default-active="user.navBar.active" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-menu-item :index="index+''" v-for="(item,index) in user.navBar.list" :key="index">{{item.name}}</el-menu-item><el-submenu index="2"><template slot="title">{{user.username}}</template><el-menu-item index="2-1">设置</el-menu-item><el-menu-item index="2-2">退出</el-menu-item></el-submenu></el-menu></div> methods: { ...mapMutations(["getslideMenus"]), handleSelect(key, keyPath) { this.user.navBar.active = key; let item = this.user.navBar.list[this.user.navBar.active]; console.log(key, keyPath); this.getslideMenus(item.leftMenus); this.$router.push({ name:item.leftMenus[0].name }) if (key == '0') { this.$router.push({ name:'welcome' }) } }, collapse() { this.isCollapseq = !this.isCollapseq; this.$bus.$emit("collapseaside", this.isCollapseq); }, },mounted() {let item = this.user.navBar.list[this.user.navBar.active]this.getslideMenus(item.leftMenus)},computed: {...mapState(['user'])}
vuex
export default new Vuex.Store({state: {bread: [],slideMenus:[],user: JSON.parse(window.sessionStorage.getItem('rightlist')) || {} },mutations: {addBread(state,preload) { state.bread = preload},getslideMenus(state,preload){state.slideMenus = preload },getLogin(state, preload) {state.user = preloadwindow.sessionStorage.setItem('rightlist', JSON.stringify(preload))} },getters: { },actions: {}})Home.vue
methods: { ...mapMutations(["addBread"]), getbreadcrumb() { let getobj = this.$route.matched.filter((v) => v.name); console.log(getobj); let arr = []; getobj.forEach((v) => { if (v.name == "welcome" || v.name == "Home") { return; } arr.push({ name: v.name, path: v.path, title: v.meta.title, }); this.slideMenus.forEach((item) => { console.log(item); if (item.children) { item.children.filter((i) => i.key == v.path).length > 0 ? arr.unshift({ title: item.title }) : arr; } }); }); if (arr.length > 0) { arr.unshift({ name: "Home", path: "/", title: "后台首页", }); } this.bran = arr; this.addBread(this.bran); }, },HomeLeft添加个样式判断
<template> <div class="navMenu"> <label v-for="(navMenu,n) in navMenus" :key="n"> <!--只有一级菜单--> <el-menu-item v-if="!navMenu.children" :index="n + ''" :route="navMenu.key" : > <!--图标--> <i :class="navMenu.icon" :></i> <!----> <span slot="title">{{navMenu.title}}</span> </el-menu-item> <!--有多级菜单--> <el-submenu v-if="navMenu.children" :key="navMenu.key" :index="n+''" > <template slot="title"> <i :class="navMenu.icon"></i> <span> {{navMenu.title}}</span> </template> <!--递归组件，把遍历的值传回子组件，完成递归调用--> <nav-menu :navMenus="navMenu.children"></nav-menu> </el-submenu> </label> </div></template> <script> export default { name: 'NavMenu', //使用递归组件必须要有 props: ['navMenus'], // 传入子组件的数据 data() { return {} }, methods: { handleSelect(key,keyPath){ console.log('1212') console.log(key,keyPath) } } }</script> <style scoped> </style>加个路由
import User2 from '../views/User2.vue' {path: '/user2',name:'user2',meta:{title:'用户管理2'},component: User2},现在：
到此，关于“element怎么实现二级菜单和顶部导航联动”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
