目前
原本数据结构
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']
},
]
}
]
}
]
头部布局
{{item.name}} {{user.username}} 设置 退出
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添加个样式判断
加个路由
import User2 from '../views/User2.vue'
{
path: '/user2',
name:'user2',
meta:{title:'用户管理2'},
component: User2
},
现在：
到此这篇关于element实现二级菜单和顶部导航联动的示例的文章就介绍到这了,更多相关element 二级菜单和顶部导航联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！