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

vue 学习笔记 【ElementPlus】el-menu 折叠后图标不见了

项目当前版本

{"dependencies": {"@element-plus/icons-vue": "^2.1.0","@types/js-cookie": "^3.0.3","@types/nprogress": "^0.2.0","axios": "^1.4.0","core-js": "^3.8.3","element-plus": "^2.3.8","js-cookie": "^3.0.5","nprogress": "^0.2.0","path-browserify": "^1.0.1","svg-sprite-loader": "^6.0.11","vue": "^3.2.13","vue-router": "^4.0.3","vuex": "^4.0.0"},
}

运行过程中,菜单折叠后,图标不见了

<template><template v-if="haspurview(item)"><!-- <template v-if="!item.hidden || item.hidden !== true"> --><el-menu-itemv-if="hasChild(item) == 0":index="resolvePath(item.path)":key="resolvePath(item.path)"><template #title><el-icon><component :is="item.meta?.icon" /></el-icon><span>{{ item.meta?.title }}</span></template></el-menu-item><!-- <template v-else-if="hasChild(item) == 1 && item.meta?.menuup"> --><el-menu-itemv-if="hasChild(item) == 1":index="resolvePath(onlyOneChild.path)":key="resolvePath(onlyOneChild.path)"><template #title><el-icon><component :is="onlyOneChild.meta?.icon" /></el-icon><span>{{ onlyOneChild.meta?.title }}</span></template></el-menu-item><el-sub-menuv-if="hasChild(item) > 1":index="resolvePath(item.path)":key="resolvePath(item.path)"><template #title><el-icon v-if="item.meta?.icon"><component :is="item.meta?.icon" /></el-icon><span>{{ item.meta?.title }}</span></template><MenuItemv-for="child in item.children":key="child.path":item="child"/></el-sub-menu></template>
</template>

在这里插入图片描述
图标不见了
在这里插入图片描述

解决办法是把icon 从#title 中提取出来

    <el-menu-itemv-if="hasChild(item) == 0":index="resolvePath(item.path)":key="resolvePath(item.path)"><el-icon><component :is="item.meta?.icon" /></el-icon><template #title><span>{{ item.meta?.title }}</span></template></el-menu-item>

运行结果
在这里插入图片描述

http://www.lryc.cn/news/95366.html

相关文章:

  • 【JavaEE初阶】HTTP协议
  • 基于SaaS模式的Java基层卫生健康云HIS系统源码【运维管理+运营管理+综合监管】
  • effective c++ 条款2
  • Python爬虫之Scrapy框架系列(23)——分布式爬虫scrapy_redis浅实战【XXTop250部分爬取】
  • html基于onmouse事件让元素变颜色
  • Linux环境PostgreSQL安装
  • Rust 数据类型 之 结构体(Struct)
  • 数据结构之Queue的实现
  • rust声明式宏
  • 第二章:Learning Deep Features for Discriminative Localization ——学习用于判别定位的深度特征
  • 【CSS】box-shadow 属性
  • 基于深度学习的高精度课堂人脸检测系统(PyTorch+Pyside6+YOLOv5模型)
  • Mysql错误日志、通用查询日志、二进制日志和慢日志的介绍和查看
  • 【Linux】Tcp服务器的三种与客户端通信方法及守护进程化
  • 【Spring Cloud】git 仓库新的配置是如何刷新到各个微服务的原理步骤
  • 三,创建订单微服务消费者 第三章
  • 【雕爷学编程】Arduino动手做(87)---ULN2003步进电机模组2
  • 【C#】微软的Roslyn 是个啥?
  • 两个小封装电机驱动芯片:MLX813XX、A4950
  • 数据结构【绪论】
  • 掌握无人机遥感数据预处理的全链条理论与实践流程、典型农林植被性状的估算理论与实践方法、利用MATLAB进行编程实践(脚本与GUI开发)以及期刊论文插图制作等
  • Angular中组件设计需要注意什么?
  • 电容触摸屏(TP)的工艺结构
  • Qt小妙招:如何在可执行文件生成后,在pro文件中添加其他命令操作?
  • 做好防雷检测的意义和作用
  • 计算机启动过程uefi+gpt方式
  • 探索容器镜像安全管理之道
  • 【MySQL】内置函数
  • 使用arm-none-eabi-gcc编译器搭建STM32的Vscode开发环境
  • 图数据库Neo4j学习二——cypher基本语法