当前位置: 首页 > news >正文

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顶部导航栏与左侧导航栏联动实现~

需求&#xff1a;点击顶部导航栏的不同栏位实现左侧导航栏菜单的不同展示实现联动效果。 点击顶部导航栏按钮将对应的左侧导航栏数据传递给vuex,并在左侧导航栏父组件中接收并传递给左侧导航栏子组件&#xff0c;使用递归组件实现渲染等&#xff0c;具体的优化可以看下面的注释…...

ECMAScript6模板字面量:反引号、${}占位符的使用

ECMAScript 6 中引入了模板字面量&#xff0c;主要通过多行字符串和字符串占位符对字符串进行增强操作。如下&#xff1a; //使用ECMAScript6模板字面量拼接字符串&#xff0c;例如&#xff1a;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 &#xff0c;则会主动将连线中断。如果iot core检测到tcp 连接中断, 会立即中断&#xff1b;如果未检测到则会等到1.5倍 …...

【代码随想录训练营第42期 Day26打卡 贪心Part1 - LeetCode 455.分发饼干 376. 摆动序列 53. 最大子序和

目录 一、贪心 二、题目与题解 题目一&#xff1a;455.分发饼干 题目链接 题解&#xff1a;排序双指针贪心 题目二&#xff1a;376. 摆动序列 题目链接 题解&#xff1a;贪心 题目三&#xff1a;53. 最大子序和 题目链接 题解1&#xff1a;暴力&#xff08;失败&…...

利用有限元法(FEM)模拟电磁场与样品的相互作用

一、引言 电磁场与物质的相互作用是理解光学现象的基础。在实际应用中&#xff0c;激光光束与样品的相互作用通常涉及复杂的电磁场分布&#xff0c;尤其在微纳尺度结构中。因此&#xff0c;使用数值模拟方法如有限元法&#xff08;FEM&#xff09;来模拟电磁场的分布和传播&…...

如何保持git主分支树的整洁

经典应用展示Git版本控制用法 本章将列举Git的一些闪亮特性,期待能够让您爱上Git 文章目录 经典应用展示Git版本控制用法前言一、分支是什么?二、主-分支合并merge三、cherry-pick(精挑细选)四、Rebase(变基)4.1 合并本地分支到主分支4.2 合并本地分支从指定commit开始的…...

Datawhale X 魔搭 AI夏令营 Task1 从零入门AI生图原理实践笔记

赛题内容 参赛者需在可图Kolors模型的基础上训练LoRA模型&#xff0c;生成无限风格&#xff0c;如水墨画风格、水彩风格、赛博朋克风格、日漫风格… 基于LoRA模型生成8张图片组成连贯故事&#xff0c;故事内容可自定义&#xff1b;基于8图故事&#xff0c;评估LoRA风格的美感度…...

Python中将代码打包成exe文件

在Python中将代码打包成exe文件&#xff0c;可以使用PyInstaller工具。以下是使用PyInstaller将Python脚本打包成exe的步骤&#xff1a; 安装PyInstaller&#xff1a; pip install pyinstaller使用PyInstaller打包Python脚本&#xff1a; pyinstaller --onefile your_script…...

【C++ 面试 - 基础题】每日 3 题(十三)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…...

Android中的Binder

binder是Android平台的一种跨进程通信&#xff08;IPC&#xff09;机制&#xff0c;从应用层角度来说&#xff0c;binder是客户端和服务端进行通信的媒介。 ipc原理 ipc通信指的是两个进程之间交换数据&#xff0c;如图中的client进程和server进程。 Android为每个进程提供了…...

记录一次.gitignore 失效问题

前言 今天使用git同步同事的代码时&#xff0c;出现一个问题&#xff0c;.gitignore限制失效&#xff0c;导致我本地生成的临时缓存文件被跟踪到了commit中&#xff0c;执行 git rm --cache .后再add commit也不行&#xff0c;很奇怪就研究了一下&#xff0c;下面将我的解决方…...

Eclipse 工作空间

Eclipse 工作空间 Eclipse 工作空间&#xff08;Workspace&#xff09;是 Eclipse IDE 中一个核心概念&#xff0c;它指的是一个用于组织和存储开发项目及相关文件的目录。在 Eclipse 中&#xff0c;所有开发活动都是围绕工作空间展开的。本文将详细介绍 Eclipse 工作空间的概…...

[240812] X-CMD 发布 v0.4.5:更新 gtb、cd、chat、hashdir 模块功能

目录 &#x1f4c3;Changelog✨ gtb✨ cd✨ chat✨ hashdir &#x1f4c3;Changelog ✨ gtb 调整了 fzf 预览窗口中书籍文本的显示效果&#xff0c;通过识别文本中的特殊字符、日期、章节标题等信息&#xff0c;为其赋予不同的颜色。 ✨ cd cd 模块新增功能&#xff1a;在找…...

Flutter中的异步编程

目录 前言 1. Future 和 async/await 1.Future 1.什么是Future? 2.Flutter的三种状态 1.未完成&#xff08;Uncompleted&#xff09; 1.定义 2.处理未完成的Future 2.已完成(Completed with a value) 1.概念 2.处理已完成的Future 3.使用async/await 4.Fu…...

vue3 路由带传参跳转;刷新后消失。一次性参数使用。

解决vue3 怎么做到路由跳转传参刷新后消失 解决路由跳转传参去除问题 想要跳转后根据参数显示对应的tab&#xff0c;但url传参刷新会持续保留无法重置。 router.replace替换又会导致显示内容为router.replace后的&#xff0c;传参目的丢失。 业务逻辑&#xff1a; 完成对应操作…...

Unity新输入系统结构概览

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 在学习新输入系统之前&#xff0c;我们需要对其构成有个印象 1.输入动作&#xff08;Inputaction&#xff09; 是定义输…...

18104 练习使用多case解题

### 伪代码 1. 读取第1批测试数据的CASE数量。 2. 处理第1批测试数据&#xff0c;计算每个CASE的最小公倍数并输出。 3. 输出“group 1 done”。 4. 处理第2批测试数据&#xff0c;直到遇到两个0&#xff0c;计算每个CASE的最小公倍数并输出。 5. 输出“group 2 done”。 6. 处…...

【AI人工智能】文心智能体 - 你的专属车牌设计师

引言 自AI盛行以来&#xff0c;不断有各种各样的人工智能产品崭露头角。我们逐步跟着不断产生的人工智能来使自己的工作和生活变得更加智能化&#xff01;那么我们是否能够创造一款专属于自己的人工智能产品呢&#xff1f; 文心智能体平台就给我们提供了这样的机会&#xff0c…...

Linux-服务器硬件及RAID配置实验

系列文章目录 提示&#xff1a;仅用于个人学习&#xff0c;进行查漏补缺使用。 1.Linux介绍、目录结构、文件基本属性、Shell 2.Linux常用命令 3.Linux文件管理 4.Linux 命令安装(rpm、install) 5.Linux账号管理 6.Linux文件/目录权限管理 7.Linux磁盘管理/文件系统 8.Linu…...

白屏检测系统的设计与实现

目录 一、 什么是白屏问题&#xff1f;二、 问题分析与拆解2.1 人工判定一个白屏问题的逻辑2.2 自动化判定一个白屏问题的算法思想 三、 白屏检测算法3.1 图像灰度化3.2 图像二值化3.3 计算&#xff08;判定为白屏&#xff09;置信度 四、 白屏检测系统的设计与实现4.1 UI自动化…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...