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

Element-plus侧边栏踩坑

问题描述

el-menu直接嵌套el-menu-item菜单,折叠时不会出现文字显示和小箭头无法隐藏的问题,但是实际开发需求中难免需要把el-menu-item封装为组件

解决

vue3项目中嵌套两层template

<template><template v-for="item in list" :key="item.path"><!--  一级路由 --><el-menu-item v-if="!item.children && !item.meta?.hidden" :index="item.path"><el-icon size="30px"><component :is="item.meta?.icon"></component></el-icon><template #title><span class="ml-1">{{ item.meta?.title }}</span></template></el-menu-item><!--  二级路由但只有一个子项 --><el-menu-item v-if="(item.meta?.single && item.children) && !item.meta?.hidden" :index="item.children[0].path"><el-icon size="30px"><component :is="item.children[0].meta?.icon"></component></el-icon><template #title><span class="ml-1">{{ item.children[0].meta?.title }}</span></template></el-menu-item><!--  二级路由 --><el-sub-menu :index="item.path" v-if="(item.children && item.children.length > 1) && !item.meta?.hidden"><template #title><el-icon size="30px"><component :is="item.meta?.icon"></component></el-icon><span class="ml-1">{{ item.meta?.title }}</span></template><!--  递归路由 --><MenuItem :list="item.children"></MenuItem></el-sub-menu></template>
</template>

效果

在这里插入图片描述

相关文章:

Element-plus侧边栏踩坑

问题描述 el-menu直接嵌套el-menu-item菜单&#xff0c;折叠时不会出现文字显示和小箭头无法隐藏的问题&#xff0c;但是实际开发需求中难免需要把el-menu-item封装为组件 解决 vue3项目中嵌套两层template <template><template v-for"item in list" :k…...

支持多种通信方式和协议方便接入第三方服务器或云平台

2路RS485串口是一种常用的通信接口&#xff0c;可以支持Modbus Slave协议&#xff0c;并可接入SCADA、HMI、DSC、PLC等上位机。它还支持Modbus RTU Master协议&#xff0c;可用于扩展多达48个Modbus Slave设备&#xff0c;如Modbus RTU远程数据采集模块、电表、水表、柴油发电机…...

使用 OpenCV 进行图像模糊度检测(拉普拉斯方差方法)

写在前面 工作中遇到&#xff0c;简单整理人脸识别中&#xff0c;对于模糊程度较高的图像数据&#xff0c;识别率低&#xff0c;错误率高。虽然使用 AdaFace 模型&#xff0c;对低质量人脸表现尤为突出。但是还是需要对 模糊程度高的图像进行丢弃处理当前通过阈值分类&#xff…...

神经网络简单介绍

人工神经网络(artififial neural network) 简称神经网络&#xff0c;它是一种模仿生物神经网络结构和功能的非线性数学模型。 神经网络通过输入层接受原始特征信息&#xff0c;再通过隐藏层进行特征信息的加工和提取&#xff0c;最后通过输出层输出结果。 根据需要神经网络可以…...

16位S912ZVML32F3MKH、S912ZVML31F1WKF、S912ZVML31F1MKH混合信号MCU,适用于汽车和工业电机控制应用。

S12 MagniV微控制器是易于使用且高度集成的混合信号MCU&#xff0c;非常适合用于汽车和工业应用。S12 MagniV MCU提供单芯片解决方案&#xff0c;是基于成熟的S12技术的完整系统级封装 (SiP) 解决方案&#xff0c;在整个产品组合内软件和工具都兼容。 S12 MagniV系统级封装 (S…...

力扣 509. 斐波那契数

题目来源&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ C题解1&#xff1a;根据题意&#xff0c;直接用递归函数。 class Solution { public:int fib(int n) {if(n 0) return 0;else if(n 1) return 1;else return(fib(n-1) fib(n-2));} }; C题…...

使用 DolphinDB TopN 函数探索高效的Alpha因子

DolphinDB 已经有非常多的窗口计算函数&#xff0c;例如 m 系列的滑动窗口计算&#xff0c;cum 系列累计窗口计算&#xff0c;tm 系列的的时间窗口滑动计算。但是所有这类函数都是对窗口内的所有记录进行指标计算&#xff0c;难免包含很多噪音。 DolphinDB 的金融领域用户反馈…...

超聚变和厦门大学助力兴业银行构建智慧金融隐私计算平台,助力信用卡业务精准营销...

兴业银行与超聚变数字技术有限公司、厦门大学携手&#xff0c;发挥产学研用一体化整体优势联合建设&#xff0c;厦门大学提供先进的算法模型及科研能力&#xff0c;超聚变提供产品解决方案及工程能力&#xff0c;兴业银行提供金融实践能力&#xff0c;三方发挥各自领域优势&…...

docker 的compose安装

1. Docker Compose 环境安装 Docker Compose 是 Docker 的独立产品&#xff0c;因此需要安装 Docker 之后在单独安装 Docker Compose docker compose 实现单机容器集群编排管理&#xff08;使用一个模板文件定义多个应用容器的启动参数和依赖关系&#xff0c;并使用docker co…...

JavaScript---事件对象event

获取事件对象&#xff1a; 事件对象&#xff1a;是个对象&#xff0c;这个对象里有事件触发时的相关信息&#xff0c;在事件绑定的回调函数的第一个参数就是事件对象&#xff0c;一般命名为event、ev、e eg: 元素.addEventListener(click,function (e){}) 部分常用属性&…...

Day 15 C++对象模型和this指针

目录 C对象模型 类内的成员变量和成员函数分开存储 总结 this指针 概念 示例 用途 当形参和成员变量同名时 在非静态成员函数中&#xff0c;如果希望返回对象本身 例子 空指针访问成员函数 示例 const修饰成员函数 常函数&#xff08;const member function&…...

HarmonyOS/OpenHarmony元服务开发-卡片生命周期管理

创建ArkTS卡片&#xff0c;需实现FormExtensionAbility生命周期接口。 1.在EntryFormAbility.ts中&#xff0c;导入相关模块。 import formInfo from ohos.app.form.formInfo; import formBindingData from ohos.app.form.formBindingData; import FormExtensionAbility from …...

软件工程01

软件工程原则&#xff1a; 开闭原则&#xff1a; open closed principle &#xff1a; 对扩展开放&#xff0c;对修改关闭&#xff0c;&#xff0c;&#xff0c;只让扩展&#xff0c;不让修改&#xff0c;用新增的类去替代修改的类 扩展之后&#xff0c;代码不用改变&#xff…...

UML/SysML建模工具更新(2023.7)(1-5)有国产工具

DDD领域驱动设计批评文集 欢迎加入“软件方法建模师”群 《软件方法》各章合集 最近一段时间更新的工具有&#xff1a; 工具最新版本&#xff1a;Visual Paradigm 17.1 更新时间&#xff1a;2023年7月11日 工具简介 很用心的建模工具。支持编写用例规约。支持文本分析和C…...

Mac plist文件

macOS、iOS、iPadOS的应用程序都可能会有plist配置文件&#xff0c;他是苹果系列操作系统特有的配置文件。 plist的本质是个xml格式的文本文件&#xff0c;英文全称是property list&#xff0c;文件后缀使用.plist。 对于普通用户来说&#xff0c;基本不用管plist文件是什么&…...

基于Java+SpringBoot+vue前后端分离校园周边美食探索分享平台设计实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

【openwrt】package介绍

openwrt package介绍 OpenWrt 构建系统主要围绕package的概念展开。不管是什么软件&#xff0c;几乎都对应一个package。 这几乎适用于系统中的所有内容&#xff1a;HOST工具、交叉编译工具链、Linux 内核、内核mod、根文件系统和上层的应用软件。 一个 OpenWrt package本质上…...

vue 封装一个鼠标拖动选择时间段功能

<template><div class"timeRange"><div class"calendar"><table><thead><tr><th rowspan"6" class"weekRow"><b>周/时间</b></th><th colspan"24"><…...

ubuntu22.0安装Barrier局域网共享鼠标键盘

ubuntu22.0安装Barrier局域网共享鼠标键盘 参考网站安装步骤客户端一直开启中解决 参考网站 https://idroot.us/install-barrier-ubuntu-22-04/ 安装步骤 sudo apt update sudo apt upgrade sudo apt install wget apt-transport-https gnupg2 software-properties-common s…...

ffmpeg常用功能博客导航

FFmpeg 是一个处理视频和音频内容的开源工具库&#xff0c;可以实现编码、解码、转码、流媒体和后处理等服务。 推荐博客&#xff1a; 常见命令和使用案例 用ffmpeg转mov为mp4格式 FFmpeg 常用命令 FFmpeg 常用命令编辑音/视频&#xff08;转换格式、压缩、裁剪、截图、切分合…...

3个核心操作:让网络架构可视化变得如此简单

3个核心操作&#xff1a;让网络架构可视化变得如此简单 【免费下载链接】easy-topo vuesvgelement-ui 快捷画出网络拓扑图 项目地址: https://gitcode.com/gh_mirrors/ea/easy-topo 在数字时代的网络管理中&#xff0c;技术文档的可视化呈现已经成为专业沟通的关键。面对…...

Java智能地址解析终极指南:企业级架构设计与高性能实现方案

Java智能地址解析终极指南&#xff1a;企业级架构设计与高性能实现方案 【免费下载链接】address-parse Java 版智能解析收货地址 项目地址: https://gitcode.com/gh_mirrors/addr/address-parse 面对电商、物流、外卖等系统中复杂多变的地址输入格式&#xff0c;传统的…...

巨亏47亿,市值5000亿:拆解智谱AI的定价逻辑

2026年1月8日&#xff0c;智谱以每股116.2港元登陆港交所。截至5月中旬&#xff0c;其股价一度冲上1160港元&#xff0c;市值突破5000亿港元&#xff0c;较发行价累涨近10倍。而同期披露的2025年财报显示&#xff0c;公司全年营收7.24亿元&#xff0c;经调整净亏损31.82亿元。来…...

上海AI实验室发布WildClawBench:AI智能体究竟能走多远?

这项由上海人工智能实验室联合香港中文大学、复旦大学、中国科学技术大学、上海交通大学、清华大学、浙江大学及南洋理工大学等多所顶尖机构共同完成的研究&#xff0c;于2026年5月11日以预印本形式发布&#xff0c;论文编号为arXiv:2605.10912v1。感兴趣的读者可通过该编号在a…...

【Qt学习】Windows上环境配置与项目初识

文章目录环境配置下载与安装环境变量设置查看示例程序Qt Creator界面说明快捷键项目帮助构建模式编码中文问题创建第一个Qt项目创建项目项目文件程序入口本文参照视频学习记录&#xff1a; https://www.bilibili.com/list/watchlater?oid970696801&bvidBV1Jp4y167R9视频中…...

抖音批量下载终极指南:如何用开源工具高效采集视频素材

抖音批量下载终极指南&#xff1a;如何用开源工具高效采集视频素材 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback supp…...

网关端口映射和路由器端口转发有什么区别?配置要点全解析

一、什么是网关端口映射网关端口映射是指通过路由器、防火墙等网关设备&#xff0c;建立“公网IP:外部端口”与“内网设备IP:内部端口”之间的一对一映射通道&#xff0c;让外网用户能够访问内网中的特定服务。‍形象理解&#xff1a;网关相当于“小区保安”&#xff0c;公网IP…...

AzurLaneAutoScript深度解析:如何构建智能化的碧蓝航线自动化解决方案

AzurLaneAutoScript深度解析&#xff1a;如何构建智能化的碧蓝航线自动化解决方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript…...

智界V9,50万的豪华MPV来了

鸿蒙智行旗下首款旗舰MPV——智界V9正式亮相了。目前的高端MPV市场格局跟之前有很大改变&#xff0c;尤其是四十万之上这个段位&#xff0c;以前基本被几家合资老牌霸占&#xff0c;如今本土的科技企业和新势力一窝蜂杀进来。智界V9的起步价为38.98万&#xff0c;高端款51.98万…...

手把手教你配置HC32F460的Timer0 Unit2 B通道,精准实现400us串口接收超时

HC32F460定时器精准配置实战&#xff1a;400us串口接收超时中断与DMA协同设计 在嵌入式系统中&#xff0c;串口通信的可靠性往往取决于对数据包边界的准确判断。当面对无固定帧头尾的连续数据流时&#xff0c;如何精确捕捉数据包间隔成为开发难点。HC32F460系列MCU提供的接收超…...