element实现二级菜单和顶部导航联动的示例
作者：Nanchen_42
本文主要介绍了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(''),
/* rights: [{
id: 1,
authName: '用户管理',
icon: 'icon-menu',
children: [{
id: 11,
authName: '用户项目1',
path: '/menu/one',
rights: ['view', 'edit', 'add']
}, {
id: 12,
authName: '用户项目2',
path: '/menu/two',
rights: ['view', 'edit', 'add', 'delete']
}]
}, {
id: 2,
authName: '用户权限',
icon: 'icon-menu',
children: [{
id: 22,
authName: '权限项目1',
path: '/menu/three',
rights: ['view', 'edit', 'add', 'delete']
}]
},
{
id: 3,
authName: '用户信息',
icon: 'icon-menu'
},
] */
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 = preload
window.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"
:style="$route.path == navMenu.key?'color:#ffd04b':''"
>
<!--图标-->
<i :class="navMenu.icon" :style="$route.path == navMenu.key?'color:#ffd04b':''"></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实现二级菜单和顶部导航联动的示例的文章就介绍到这了,更多相关element 二级菜单和顶部导航联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！