多级侧边菜单(递归)
需要编写两个文件 aside-menu.vue 和 menu-item.vue
- menu-item.vue
<script setup>
defineOptions({name: 'MenuItem'})
defineProps({menuList: Array})
</script><template><template v-for="menu of menuList"><!-- 如果当前有子菜单,且子菜单只有一个时 --><el-menu-item v-if="menu.children && menu.children.length === 1" :index="menu.path"><el-icon><component :is="menu?.meta?.icon"></component></el-icon><template #title><span>{{ menu.children[0]?.meta?.title }}</span></template></el-menu-item><!-- 如果当前有子菜单,且子菜单大于一个时 --><el-sub-menuv-if="menu.children && menu.children.length > 1":index="menu.path"><template #title><el-icon><component :is="menu?.meta?.icon"></component></el-icon><span>{{ menu?.meta?.title }}</span></template><!-- 调用自身 此处是重点--><MenuItem :menuList="menu.children"></MenuItem></el-sub-menu><!-- 如果没有子菜单,则显示当前内容 --><el-menu-item v-if="!menu.children || menu.children.length===0" :index="menu.path"><el-icon><component :is="menu?.meta?.icon"></component></el-icon><template #title><span>{{ menu?.meta?.title }}</span></template></el-menu-item></template>
</template><style lang="scss" scoped></style>
- aside-menu.vue (menuList在该组件中请求后端接口获取)
<script setup>
import MenuItem from "./menu-item.vue";defineProps({isCollapse: {type: Boolean,default: true}
})
// 菜单列表
let menuList =[{path: '/',name: 'Layout',redirect: '/home',component: '/views/layout/index',meta: {title: 'Layout',icon: 'HomeFilled',hidden: false},children: [{path: '/home',name: 'Home',component: '/views/home/index',meta: {title: '首页',icon: 'HomeFilled',hidden: false}},]},{path: '/sys',name: 'Sys',component: '/views/layout/index',meta: {title: '系统管理',icon: 'document',hidden: false},children: [{path: '/sys/user',name: 'User',component: '/views/sys/user/index',meta: {title: '用户管理',icon: 'document',hidden: false}},{path: '/sys/role',name: 'Role',component: '/views/sys/role/index',meta: {title: '角色管理',icon: 'document',hidden: false}},]}
]//通过递归 将 menuList 属性hidden为true的菜单及其子菜单过滤掉
function filterHiddenMenu(menuList) {return menuList.filter(menu => {if (menu.children) {menu.children = filterHiddenMenu(menu.children)}return !menu?.mata?.hidden})
}menuList = filterHiddenMenu(menuList)
</script><template><div><el-menu :collapse="isCollapse" :collapse-transition="false"><MenuItem :menu-list="menuList"></MenuItem></el-menu></div>
</template><style lang="scss" scoped>
.el-menu {height: 100%;width: 100%;
}
</style>
- 使用我们编写的 aside-menu组件
<script setup>
import {ref} from "vue";
import AsideMenu from "./aside-menu/index.vue";// 是否折叠菜单,默认折叠
const isCollapse = ref(true)</script><template><AsideMenu :isCollapse="isCollapse"></AsideMenu>
</template><style scoped lang="scss">
</style>
相关文章:
多级侧边菜单(递归)
需要编写两个文件 aside-menu.vue 和 menu-item.vue menu-item.vue <script setup> defineOptions({name: MenuItem}) defineProps({menuList: Array}) </script><template><template v-for"menu of menuList"><!-- 如果当前有子菜单&a…...
JavaScript break与continue语句
break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行。 break break语句用于跳出代码块或循环 for(i0;i<100;i){if(i5){break;}console.log(i);} continue continue语句用于应即终止本轮循环,返回循环结构的头部,开始下一轮循环。…...
算法【从递归入手一维动态规划】
动态规划:用空间代替重复计算,包含一整套原理和技巧的总和。后面会有非常多的文章介绍动态规划。 有些递归在展开计算时,总是重复调用同一个子问题的解,这种重复调用的递归变成动态规划很有收益。如果每次展开都是不同的解&#…...
Linux中的进程间通信之共享内存
共享内存 共享内存示意图 共享内存数据结构 struct shmid_ds {struct ipc_perm shm_perm; /* operation perms */int shm_segsz; /* size of segment (bytes) */__kernel_time_t shm_atime; /* last attach time */__kernel_time_t shm_dtime; /* last detach time */__kerne…...
第18周 3-过滤器
过滤器(Filter)概念总结 什么是过滤器 过滤器(Filter)是Java Web应用中用于统一拦截和处理请求的组件,类似于现实生活中的空气净化器或安检。它通过对请求进行前置处理,确保请求符合特定要求。 过滤器的…...
Linux之进程概念
作者主页: 作者主页 本篇博客专栏:Linux专栏 创作时间 :2024年9月28日 基本概念: 进程说白了其实就是一个程序的执行实例,正在执行的程序。 在内核层面来说,就是一个担当分配资源(CPU时间…...
小程序-使用npm包
目录 Vant Weapp 安装 Vant 组件库 使用 Vant 组件 定制全局主题样式 API Promise化 1. 基于回调函数的异步 API 的缺点 2. 什么是 API Promise 化 3. 实现 API Promise 化 4.调用 Promise 化之后的异步 API 小程序对 npm 的支持与限制 目前,小程序中已经…...
【springboot】整合沙箱支付
目录 1. 配置沙箱应用环境2. 配置springboot项目1. 引入依赖2. 配置文件注册下载ngrok 3. 创建支付宝支付服务类4. 支付界面模板5. 控制类实现支付6. 测试 1. 配置沙箱应用环境 使用支付宝账号登录到开放平台控制台。 使用支付宝登录后,看到以下页面,下…...
技术速递|Python in Visual Studio Code 2024年9月发布
排版:Alan Wang 我们很高兴地宣布将于 2024 年 9 月发布适用于 Visual Studio Code 的 Python 和 Jupyter 扩展! 此版本包括以下公告: Django 单元测试支持使用 Pylance 从 inlay 提示转到定义 如果您有兴趣,可以在我们的 Pyth…...
数据结构-3.5.队列的顺序实现
一.队列的顺序实现,初始化操作以及判断队列是否为空: 1.图解: 2.代码: #include<stdio.h> #define MaxSize 10 //定义一个队列最多存储的元素个数 typedef struct {int data[MaxSize]; //用静态数组存放队列元素int f…...
preconnect 预解析
preconnect 是一种浏览器优化技术,用于告诉浏览器提前与指定的域名建立连接,包括DNS解析、TCP握手和TLS协商(如果适用)。这样做可以减少客户端在请求资源时所需的往返时间(RTT),从而提高页面加载…...
Leecode热题100-283.移动零
给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums [0] 输出: […...
如何高效使用Prompt与AI大模型对话
一、如何与人工智能对话 在人工智能的世界里,提示词(Prompt)就像是一把钥匙,能够解锁AI智能助手的潜力,帮助你更高效地获取信息、解决问题。但如何正确使用这把钥匙,却是一门艺术。本文将带你了解提示词的…...
Java 之深入理解 String、StringBuilder、StringBuffer
前言 由于发现 String、StringBuilder、StringBuffer 面试的时候会经常问到,这里就顺便总结一下:本文重点会以这三个字符串类的性能、线程安全、存储结构这三个方面进行分析 ✨上期回顾:Java 哈希表 ✨目录 前言 String 介绍 String 的不可变…...
vue3项目执行pnpm update后还原package.json文件后运行报错
项目场景: vue官方版本已更新到vue3.5,项目中还在使用vue3.4,因此想要更新项目vue版本。 问题描述 执行了 pnpm update 命令,一键更新了所有包,更新完成后项目不能正常运行。为了还原项目代码,先删除 nod…...
蓝桥杯【物联网】零基础到国奖之路:十七. 扩展模块之单路ADC和NE555
蓝桥杯【物联网】零基础到国奖之路:十七. 扩展模块之单路ADC和NE555 第一节 硬件解读第二节 CubeMx配置第三节 代码1,脉冲部分代码2,ADC部分代码![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/57531a4ee76d46daa227ae0a52993191.png) 第一节 …...
SolveigMM Video Splitter方便快捷视频分割合并软件 V3.6.1309.3-供大家学习研究参考
视频分割功能(Splitter)支持各种编码格式的AVI(DivX、DV、MJPEG、XVID、MPEG-4)、WMV、ASF(DivX、MJPEG、XVID、MPEG-4、WM Video 7/9)F、MPEG(*.mpg、*.mpeg、*.mpv、*.m2v、*.vob)文件、也支持受损的WMV、ASF格式的分割。视频合并功能(Joiner)则支持AVI、WMV/ASF、WMA、MP3、…...
Unity3D 创建一个人物,实现人物的移动
1,创建项目 首先打开我们的Unity Hub 在我们的编译器下面新建项目,选择3D模板,更改一下我们的项目名称,选择一下路径,然后点击创建项目 等待项目创建。。。。。。 我们在项目里先创建一个plane,这样有点视…...
【笔记】数据结构12
文章目录 2013年408应用题41方法一方法二 看到的社区的一个知识总结,这里记录一下。 知识点汇总 2013年408应用题41 解决方法: 方法一 (1)算法思想 算法的策略是从前向后扫描数组元素,标记出一个可能成为主元素的元…...
django的URL配置
1 django如何处理一个请求 首先Django要使用根URLconf模块,通过setting.py配置文件的ROOT_URLCONF来设置。 加载该模块后并查找变量 urlpatterns。这是一个Python的django.conf.urls.url()实例列表。 Django按顺序运行每个URL模式,并在匹配所请求的…...
精华帖分享 | 因子构建思考1
本文来源于量化小论坛股票量化板块精华帖,作者为z-coffee。 以下为精华帖正文: 一段时间没写帖子,其实一直在研究策略,只是从不同的角度去思考而已。熟悉我的老板其实清楚,我的炉子水平一般,基本不太依托…...
kubernetes笔记(四)
一、Pod调度策略 1.基于节点的调度 spec->nodeName [rootmaster ~]# vim myhttp.yaml --- kind: Pod apiVersion: v1 metadata:name: myhttp spec:nodeName: node-0001 # 基于节点名称进行调度containers:- name: apacheimage: myos:httpd[rootmaster ~]# kubectl a…...
通信工程学习:什么是SNMP简单网络管理协议
SNMP:简单网络管理协议 SNMP(Simple Network Management Protocol,简单网络管理协议)是一种用于在计算机网络中管理网络节点(如服务器、工作站、路由器、交换机等)的标准协议。它属于OSI模型的应用层&#…...
ubuntu20.04系统下,c++图形库Matplot++配置
linux下安装c图形库Matplot,使得c可以可视化编程;安装Matplot之前,需要先安装一个gnuplot,因为Matplot是依赖于此库 gnuplot下载链接: http://www.gnuplot.info/ 一、gnuplot下载与安装(可以跳过,下面源码…...
[激光原理与应用-126]:南京科耐激光-激光焊接 - 焊中无损检测技术 - 智能制程监测系统IPM介绍 - 26- 频域分析法
目录 一、什么是频域分析法 1、定义 2、基本原理 3、分析步骤 4、应用领域 5、优缺点 二、频域分析法在激光焊接故障监测中的应用 2.1 概述 1、应用背景 2、频域分析法的应用 3、应用优势 4、应用实例 2.2 激光焊接故障检测中光电信号的频谱特征 1、光电信号分类…...
深入理解 Solidity 修饰符(Modifier):功能、应用与最佳实践
1. 什么是修饰符(Modifier)? 1.1 修饰符的定义 在 Solidity 中,修饰符(Modifier)是一种用于更改函数行为的关键字。它们可以用于控制函数的执行条件、添加前置检查、简化重复逻辑等。修饰符在函数执行之前…...
YOLO11项目实战1:道路缺陷检测系统设计【Python源码+数据集+运行演示】
一、项目背景 随着城市化进程的加速和交通网络的不断扩展,道路维护成为城市管理中的一个重要环节。道路缺陷(如裂缝、坑洞、路面破损等)不仅影响行车安全,还会增加车辆的磨损和维修成本。传统的道路缺陷检测方法主要依赖人工巡检…...
怎么屏蔽统计系统统计到的虚假ip
屏蔽统计系统中的虚假IP是保护网站分析数据准确性的重要措施。以下是一些有效的策略和步骤,可以帮助您过滤掉虚假IP: 1. 识别虚假IP的特征 了解虚假IP的常见特征可以帮助您识别和屏蔽它们: 短时间内高频率访问:虚假IP可能会在短…...
前端开发设计模式——策略模式
目录 一、策略模式的定义和特点 1.定义: 2.特点: 二、策略模式的实现方式 1.定义策略接口: 2.创建具体策略类: 3.定义上下文类: 三、策略模式的应用场景 1.表单验证场景: 2.动画效果切换场景&…...
SysML案例-潜艇
DDD领域驱动设计批评文集>> 《软件方法》强化自测题集>> 《软件方法》各章合集>>...
摄图网的图片可以做网站吗/b2b网站免费推广
区块链的互操作性使用户可以方便地在多个区块链网络进行交易,但区块链也面临了诸多问题亟待解决,其中不互通性极大地限制了区块链的应用空间。因此,跨链的出现使得区块链的互操作性变强,有了跨多个区块链系统和网络共享数据和其他…...
长宁区网站制作/seo优化培训班
前言 继上文聊聊HDFS BlockManager的服务化改造之后,本文我们继续来讨论HDFS扩展性相关的问题。在本文的阐述过程中,我们将通过一个平时遇到的典型问题-HDFS小文件过多问题作为贯穿全文的一个核心要点。在下文中,笔者将会介绍小文件的缘由&am…...
商丘网站制作方案/长沙网络公司最新消息
HTML validate是指HTML验证。它是通过与标准HTML规则进行比较的方式,分析HTML文档、标记出错误和非标准代码的处理过程。Web页面使用HTML进行渲染,而HTML本身采用了HTML规范作为其规则和标准。通过验证HTML代码穿越多重浏览器标准!1、Web站点…...
哪里培训做网站/seo基础知识
1、简介:git是一款免费、开源的分布式版本控制系统2、特点:(1) Git是一个开源的分布式版本控制系统,可以有效,高速的处理从很小到非常大的项目版本管理3、Git安装(1) 从github官网下载或从其它网站下载wget https://codeload.gith…...
专业做pc+手机网站/seo搜索引擎优化求职简历
无论是在现实世界还是试验室环境中,Cisco IOS测试命令都是一个非常有用并且功能强大的命令。如果你从未用过Cisco IOS test命令,这并不奇怪。我遇到过许多从未听说过这个命令的网络管理员。根据我的经验,无论是在现实世界还是实验室环境中&am…...
个人网站首页导航栏ps制作教程/中国企业网络营销现状
1. 安装docker(略) 2. 拉取nginx docker pull nginx3. 进入nginx,将相关文件和目录拷贝到宿主机上(这里为腾讯云centos7.8)关键路径如下: # nginx的主配置文件 /etc/nginx/nginx.conf # 虚拟主机的配置文…...