Element UI顶部导航栏与左侧导航栏联动实现~
需求:点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。
点击顶部导航栏按钮将对应的左侧导航栏数据传递给vuex,并在左侧导航栏父组件中接收并传递给左侧导航栏子组件,使用递归组件实现渲染等,具体的优化可以看下面的注释即可。
//顶部导航栏
<template><divstyle="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;"><div class="top_div1"><imgsrc="../assets/logo.png"alt="log"style="width: 50px; height: 60px"/><div style="width: 100px">后台管理系统</div></div><div style="width: 450px; box-sizing: border-box"><el-menu:default-active="activeIndex2"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"class="top_div2"><el-menu-item:index="String(index)"v-for="(item, index) in lists":key="index">{{ item.name }}</el-menu-item><el-submenu index="4"><template slot="title">我的工作台</template><el-menu-item index="4-1">设置</el-menu-item><el-menu-item index="4-2">退出</el-menu-item></el-submenu></el-menu></div></div>
</template><script>
import { mapMutations } from "vuex";
export default {name: "showTop",data() {return {num: 0,//导航栏高亮activeIndex2: null,// 假设这是请求回来的数据lists: [{name: "首页",id: 0,leftMenus: [{id: 1,title: "用户管理",key: "/user",name: "user",rights: ["view", "edit", "add", "delete"],},{id: 2,title: "商品管理",key: "/products",name: "products",children: [{id: 21,title: "品类管理",key: "/categroy",name: "categroy",rights: ["view", "edit", "add", "delete"],},{id: 22,title: "商品生产",key: "/product",name: "product",rights: ["view", "edit", "add", "delete"],},],},{id: 3,title: "角色管理",key: "/sex",name: "sex",rights: ["view", "edit", "add", "delete"],},],},{name: "商品",id: 1,leftMenus: [{id: 1,title: "用户管理2",key: "/user2",name: "user2",rights: ["view", "edit", "add", "delete"],},],},{name: "订单",id: 2,},{name: "会员",id: 3,},{name: "设置",id: 4,},],};},mounted() {// 调整高亮设置,实现刷新不复原if (localStorage.getItem("activeIndex2")) {this.activeIndex2 = localStorage.getItem("activeIndex2");} else {this.activeIndex2 = String(this.lists[0].id);}//用来默认展示左侧导航栏let num = localStorage.getItem('key')if(num){this.setLeftMenus(this.lists[num].leftMenus);}else{this.setLeftMenus(this.lists[0].leftMenus);}},methods: {...mapMutations(["setLeftMenus"]),// 顶部导航栏点击事件handleSelect(key, keyPath) {console.log(key, keyPath);// 解决element ui组件库中顶部导航栏刷新高亮复原问题,也可存储在vuex中if (key != "4-2") {localStorage.setItem("activeIndex2", String(this.lists[key].id));// console.log("aaa",this.lists[key].leftMenus)if (this.lists[key].leftMenus) {// 拿到所点击的导航栏的leftMenus,并存储在vuex中,然后在AsideLeft中拿到该数据this.setLeftMenus(this.lists[key].leftMenus);//点击顶部导航栏跳转到对应的左侧导航栏的第一个路由上this.$router.push({ name: this.lists[key].leftMenus[0].name });//实现点击首页回到welcome页面if(key == 0){this.$router.push({ name: "welcome" });}// 将key存储用来控制刷新左侧导航栏展示问题localStorage.setItem('key',key)}}// 判断是否是退出按钮if (key == "4-2") {// 清空本地缓存的tokenlocalStorage.removeItem("token");// 清除所有本地缓存localStorage.clear()// 跳转至登录页this.$router.push({ name: "login" });}},},
};
</script><style>
.top_div1 {height: 60px;display: flex;flex-direction: row;
}
.top_div2 {display: flex;flex-direction: row;flex-wrap: nowrap;
}
</style>
//左侧导航栏父组件
<template><div><!-- 动态设置default-active为当前活跃路由的path可实现刷新多级菜单折叠问题 --><el-menu:default-active="$route.path"class="el-menu-vertical-demo"background-color="rgb(60, 60, 60)"text-color="#fff"active-text-color="#ffd04b"router><Aside_demo :leftMenus="leftMenus"></Aside_demo></el-menu></div>
</template><script>
import Aside_demo from "../components/Aside_demo.vue";
import { mapState } from "vuex";
export default {name: "AsideLeft",data() {return {};},computed: {...mapState(["leftMenus"]),},components: {Aside_demo,},methods: {},
};
</script><style>
.el-menu {width: 200px;
}
</style>
//左侧导航栏子组件
<template><div><div v-for="(item, index) in leftMenus" :key="index"><!-- 多级导航 --><!-- 这里设置动态key值,解决高亮问题,也可实现路由跳转 ,并通过设置v-if来判断数据有无二级菜单数据,以此来展示二级菜单--><el-submenu :index="item.key" v-if="item.children"><template slot="title"><i class="el-icon-location"></i><span>{{ item.title }}</span></template><!-- 这里使用递归组件,用来遍历多级菜单,将children数据传给递归组件,自己遍历自己 --><nav-menu :leftMenus="item.children"></nav-menu></el-submenu><!-- 一级导航 --><!-- 通过判断当前活跃的路由path是否等于对应的左侧导航栏的key来实现默认第一个高亮以及处理一刷新高亮复原问题 --><el-menu-item :index="item.key" v-else :style="$route.path==item.key?'color:#ffd04b':''"><i class="el-icon-menu"></i><span slot="title">{{ item.title }}</span></el-menu-item></div></div>
</template><script>export default {// 注意使用递归组件,name值就要改变了name: "NavMenu",data() {return {};},props:['leftMenus'],methods: {},
};
</script><style></style>
相关文章:
Element UI顶部导航栏与左侧导航栏联动实现~
需求:点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。 点击顶部导航栏按钮将对应的左侧导航栏数据传递给vuex,并在左侧导航栏父组件中接收并传递给左侧导航栏子组件,使用递归组件实现渲染等,具体的优化可以看下面的注释…...
ECMAScript6模板字面量:反引号、${}占位符的使用
ECMAScript 6 中引入了模板字面量,主要通过多行字符串和字符串占位符对字符串进行增强操作。如下: //使用ECMAScript6模板字面量拼接字符串,例如:2024年8月12日 15:38:28 星期一 let dateRet ${Year}年${Month}月${Dates}日 ${H…...
网关与AWS云心跳周期,网关断电或者网络不稳定的离线机制
当mqtt连线建立时, 需要指定keep alive参数,当 iot core在1.5倍 keep alive timeout时长内都没收到任何来自设备端的操作, 例如 ping, subscribe, publish ,则会主动将连线中断。如果iot core检测到tcp 连接中断, 会立即中断;如果未检测到则会等到1.5倍 …...
【代码随想录训练营第42期 Day26打卡 贪心Part1 - LeetCode 455.分发饼干 376. 摆动序列 53. 最大子序和
目录 一、贪心 二、题目与题解 题目一:455.分发饼干 题目链接 题解:排序双指针贪心 题目二:376. 摆动序列 题目链接 题解:贪心 题目三:53. 最大子序和 题目链接 题解1:暴力(失败&…...
利用有限元法(FEM)模拟电磁场与样品的相互作用
一、引言 电磁场与物质的相互作用是理解光学现象的基础。在实际应用中,激光光束与样品的相互作用通常涉及复杂的电磁场分布,尤其在微纳尺度结构中。因此,使用数值模拟方法如有限元法(FEM)来模拟电磁场的分布和传播&…...
如何保持git主分支树的整洁
经典应用展示Git版本控制用法 本章将列举Git的一些闪亮特性,期待能够让您爱上Git 文章目录 经典应用展示Git版本控制用法前言一、分支是什么?二、主-分支合并merge三、cherry-pick(精挑细选)四、Rebase(变基)4.1 合并本地分支到主分支4.2 合并本地分支从指定commit开始的…...
Datawhale X 魔搭 AI夏令营 Task1 从零入门AI生图原理实践笔记
赛题内容 参赛者需在可图Kolors模型的基础上训练LoRA模型,生成无限风格,如水墨画风格、水彩风格、赛博朋克风格、日漫风格… 基于LoRA模型生成8张图片组成连贯故事,故事内容可自定义;基于8图故事,评估LoRA风格的美感度…...
Python中将代码打包成exe文件
在Python中将代码打包成exe文件,可以使用PyInstaller工具。以下是使用PyInstaller将Python脚本打包成exe的步骤: 安装PyInstaller: pip install pyinstaller使用PyInstaller打包Python脚本: pyinstaller --onefile your_script…...
【C++ 面试 - 基础题】每日 3 题(十三)
✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/fYaBd 📚专栏简介:在这个专栏中,我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏&…...
Android中的Binder
binder是Android平台的一种跨进程通信(IPC)机制,从应用层角度来说,binder是客户端和服务端进行通信的媒介。 ipc原理 ipc通信指的是两个进程之间交换数据,如图中的client进程和server进程。 Android为每个进程提供了…...
记录一次.gitignore 失效问题
前言 今天使用git同步同事的代码时,出现一个问题,.gitignore限制失效,导致我本地生成的临时缓存文件被跟踪到了commit中,执行 git rm --cache .后再add commit也不行,很奇怪就研究了一下,下面将我的解决方…...
Eclipse 工作空间
Eclipse 工作空间 Eclipse 工作空间(Workspace)是 Eclipse IDE 中一个核心概念,它指的是一个用于组织和存储开发项目及相关文件的目录。在 Eclipse 中,所有开发活动都是围绕工作空间展开的。本文将详细介绍 Eclipse 工作空间的概…...
[240812] X-CMD 发布 v0.4.5:更新 gtb、cd、chat、hashdir 模块功能
目录 📃Changelog✨ gtb✨ cd✨ chat✨ hashdir 📃Changelog ✨ gtb 调整了 fzf 预览窗口中书籍文本的显示效果,通过识别文本中的特殊字符、日期、章节标题等信息,为其赋予不同的颜色。 ✨ cd cd 模块新增功能:在找…...
Flutter中的异步编程
目录 前言 1. Future 和 async/await 1.Future 1.什么是Future? 2.Flutter的三种状态 1.未完成(Uncompleted) 1.定义 2.处理未完成的Future 2.已完成(Completed with a value) 1.概念 2.处理已完成的Future 3.使用async/await 4.Fu…...
vue3 路由带传参跳转;刷新后消失。一次性参数使用。
解决vue3 怎么做到路由跳转传参刷新后消失 解决路由跳转传参去除问题 想要跳转后根据参数显示对应的tab,但url传参刷新会持续保留无法重置。 router.replace替换又会导致显示内容为router.replace后的,传参目的丢失。 业务逻辑: 完成对应操作…...
Unity新输入系统结构概览
本文仅作笔记学习和分享,不用做任何商业用途 本文包括但不限于unity官方手册,unity唐老狮等教程知识,如有不足还请斧正 在学习新输入系统之前,我们需要对其构成有个印象 1.输入动作(Inputaction) 是定义输…...
18104 练习使用多case解题
### 伪代码 1. 读取第1批测试数据的CASE数量。 2. 处理第1批测试数据,计算每个CASE的最小公倍数并输出。 3. 输出“group 1 done”。 4. 处理第2批测试数据,直到遇到两个0,计算每个CASE的最小公倍数并输出。 5. 输出“group 2 done”。 6. 处…...
【AI人工智能】文心智能体 - 你的专属车牌设计师
引言 自AI盛行以来,不断有各种各样的人工智能产品崭露头角。我们逐步跟着不断产生的人工智能来使自己的工作和生活变得更加智能化!那么我们是否能够创造一款专属于自己的人工智能产品呢? 文心智能体平台就给我们提供了这样的机会,…...
Linux-服务器硬件及RAID配置实验
系列文章目录 提示:仅用于个人学习,进行查漏补缺使用。 1.Linux介绍、目录结构、文件基本属性、Shell 2.Linux常用命令 3.Linux文件管理 4.Linux 命令安装(rpm、install) 5.Linux账号管理 6.Linux文件/目录权限管理 7.Linux磁盘管理/文件系统 8.Linu…...
白屏检测系统的设计与实现
目录 一、 什么是白屏问题?二、 问题分析与拆解2.1 人工判定一个白屏问题的逻辑2.2 自动化判定一个白屏问题的算法思想 三、 白屏检测算法3.1 图像灰度化3.2 图像二值化3.3 计算(判定为白屏)置信度 四、 白屏检测系统的设计与实现4.1 UI自动化…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
提升移动端网页调试效率:WebDebugX 与常见工具组合实践
在日常移动端开发中,网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时,开发者迫切需要一套高效、可靠且跨平台的调试方案。过去,我们或多或少使用过 Chrome DevTools、Remote Debug…...
【C++】纯虚函数类外可以写实现吗?
1. 答案 先说答案,可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
加密通信 + 行为分析:运营商行业安全防御体系重构
在数字经济蓬勃发展的时代,运营商作为信息通信网络的核心枢纽,承载着海量用户数据与关键业务传输,其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级,传统安全防护体系逐渐暴露出局限性&a…...
