element實現二級菜單和頂部導航聯動的示例

Posted on 2022-02-15 by WalkonNet

目前

原本數據結構

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 二級菜單和頂部導航聯動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

element實現二級菜單和頂部導航聯動的示例

推薦閱讀：

發佈留言取消回覆

近期文章

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆