溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“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(''),
/* 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"
:
>
<!--圖標-->
<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怎么實現二級菜單和頂部導航聯動”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
