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 二级菜单和顶部导航联动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！