扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >element实现二级菜单和顶部导航联动的示例
  • 191

0
分享到

element实现二级菜单和顶部导航联动的示例

2024-04-02 19:04:59 191人浏览 八月长安
摘要

目前 原本数据结构 const users = [{ id: 1, username: 'nORMal', passWord: 'normal', token: '

目前

原本数据结构

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

--结束END--

本文标题: element实现二级菜单和顶部导航联动的示例

本文链接: https://lsjlt.com/news/139234.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • element实现二级菜单和顶部导航联动的示例
    目前 原本数据结构 const users = [{ id: 1, username: 'normal', password: 'normal', token: '...
    99+
    2024-04-02
  • element怎么实现二级菜单和顶部导航联动
    这篇文章主要介绍“element怎么实现二级菜单和顶部导航联动”，在日常操作中，相信很多人在element怎么实现二级菜单和顶部导航联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”element怎么实现二级...
    99+
    2023-06-29
  • Android实现顶部导航菜单左右滑动效果
    本文给大家介绍在Android中如何实现顶部导航菜单左右滑动效果，具体内容如下 第一种解决方案： 实现原理是使用android-support-v4.jar包中ViewPag...
    99+
    2022-06-06
    导航菜单 菜单 动效 Android
  • react实现导航栏二级联动
    本文实例为大家分享了react实现导航栏二级联动的具体代码，供大家参考，具体内容如下 效果图 js代码 import { Component } from "react"; imp...
    99+
    2024-04-02
  • 用jquery和css3实现的响应式二级导航菜单
    本篇内容介绍了“用jquery和css3实现的响应式二级导航菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所...
    99+
    2024-04-02
  • Jquery实现带动画效果的经典二级导航菜单
    以下是一个使用jQuery实现带动画效果的经典二级导航菜单的示例代码：HTML代码：```htmlAnimated SubmenuH...
    99+
    2023-08-14
    JQuery
  • Jquery怎么实现带动画效果的二级导航菜单
    要实现带动画效果的二级导航菜单，可以使用jQuery的`slideDown()`和`slideUp()`方法来实现菜单的展开和收起动...
    99+
    2023-08-15
    Jquery
  • 怎么用CSS+XHTML实现二级导航菜单
    这篇文章主要讲解了“怎么用CSS+XHTML实现二级导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS+XHTML实现二级导航菜单”吧！这是...
    99+
    2024-04-02
  • react如何实现导航栏二级联动
    这篇文章给大家分享的是有关react如何实现导航栏二级联动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下效果图js代码import { Component } ...
    99+
    2023-06-29
  • ElementUI 复杂顶部和左侧导航栏实现示例
    描述：如图 项目路径如下图所示： 代码实现： 首先在store.js中添加两个状态： import Vue from 'vue' import Vuex from 'vuex' ...
    99+
    2024-04-02
  • php实现二级联动菜单的方法
    小编给大家分享一下php实现二级联动菜单的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！php实现二级联动菜单的方法：首先创建好HTML文件和PHP文件；然后...
    99+
    2023-06-14
  • 怎么用CSS实现二级下拉导航菜单
    这篇文章主要讲解了“怎么用CSS实现二级下拉导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现二级下拉导航菜单”吧！这是一款纯CSS菜单...
    99+
    2024-04-02
  • dedecms首页导航菜单二级栏目调用标签实例
    本文实例讲述了dedecms首页导航菜单二级栏目调用标签的用法。分享给大家供大家参考。具体如下： 第一种方法：复制代码代码如下:{dede:channelartlist typeid='top' row='8'} {...
    99+
    2022-06-12
    dedecms 首页 导航菜单 二级栏目 调用 标签
  • React实现antdM的级联菜单实例
    目录效果图需求分析bodyhead项目结构实现body部分实现head部分整合head与body效果图 需求分析 级联菜单分为两部分：head与body。 body 包含两部分：已...
    99+
    2024-04-02
  • vue二级菜单导航点击选中事件如何实现
    这篇文章主要介绍“vue二级菜单导航点击选中事件如何实现”，在日常操作中，相信很多人在vue二级菜单导航点击选中事件如何实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue二级菜单导航点击选中事件如何实现...
    99+
    2023-07-04
  • vue实现顶部左右滑动导航的方法
    这篇文章主要讲解了“vue实现顶部左右滑动导航的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue实现顶部左右滑动导航的方法”吧！日常开发中经常用到导航这些东西，写篇文章记录下。该导航...
    99+
    2023-06-20
  • Ajax中二级联动菜单的实现原理是什么
    Ajax中二级联动菜单的实现原理是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。 index.jsp: &l...
    99+
    2024-04-02
  • 使用Ajax怎么实现一个二级联动菜单
    本篇文章为大家展示了使用Ajax怎么实现一个二级联动菜单，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。index.jsp<%@ page language="ja...
    99+
    2023-06-08
  • vue中怎么实现二级菜单导航点击选中事件
    这篇文章将为大家详细讲解有关vue中怎么实现二级菜单导航点击选中事件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。目标：一级导航点击收缩展开，二级导航点击选...
    99+
    2024-04-02
  • Android实现仿网易新闻的顶部导航指示器
    我们知道，页面导航器（Navigator）在几乎所有的项目中都会用到，平时大多数时候为了节省时间，都会直接在github上面拿别人的开源项目来用，最近自己在复习自定义View，...
    99+
    2022-06-06
    网易新闻 网易 Android
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作