首页 > 其他分享 >【ElementPlus】el-menu侧边垂直菜单折叠后图标会消失的问题解决

【ElementPlus】el-menu侧边垂直菜单折叠后图标会消失的问题解决

时间:2023-01-27 15:11:38浏览次数:43  
标签:el ElementPlus title menu 折叠 meta subItem 菜单 图标

首先上代码

<template>
    <template v-for="subItem in menuList" :key="subItem.path">
        <!-- 有子菜单 -->
        <el-sub-menu v-if="subItem.children && subItem.children.length" :index="subItem.path">
            <template #title>
                <el-icon>
                    <component :is="subItem.meta.icon"></component>
                </el-icon>
                <span>{{ subItem.meta.title }}</span>
            </template>
            <SubMenu :menuList="subItem.children" />
        </el-sub-menu>
        <!-- 无子菜单的一级菜单 -->
        <el-menu-item v-else :index="subItem.path" @click="clickMenu(subItem)">
            <template #title>
                <el-icon>
                    <component :is="subItem.meta.icon"></component>
                </el-icon>
                <span>{{ subItem.meta.title }}</span>
            </template>
        </el-menu-item>
    </template>
</template>

折叠前
折叠后的一级菜单图标不见了
折叠后

将title插槽的slot换了个位置,问题解决了

        <!-- 无子菜单的一级菜单 -->
        <el-menu-item v-else :index="subItem.path" @click="clickMenu(subItem)">
            <el-icon>
                <component :is="subItem.meta.icon"></component>
            </el-icon>
            <template #title>
                <span>{{ subItem.meta.title }}</span>
            </template>
        </el-menu-item>

标签:el,ElementPlus,title,menu,折叠,meta,subItem,菜单,图标
From: https://www.cnblogs.com/wanglei1900/p/17068905.html

相关文章

  • Python selenium 拉钩爬虫
    selenium用作自动化测试工具,并非爬虫工具,用作爬虫性能没那么好。但既然可以读取网页信息,那还是可以用来爬取数据的。用该工具模拟访问,网站会认为是正常的访问行为。项目创......
  • SQL Server Powershell 开源数据库管理工具 dbatools
    在Windows中开发自动化运维,除了python就是powershell了,powershell与windows相关产品关联紧密,Windows环境下的自动化开发一般使用powershell,sqlserver亦是如此......
  • PowerShell 脚本(Scripts)
    对于经常用或者重要的脚本,可以保持到本地文件中,需要的时候可直接调用,这样处理更加方便! 编写脚本输出到文件(若不指定绝对路径,默认都使用当前目录)"Get-Date">MyScript.p......
  • model Sim 保存波形设置
    在Wave窗口File→SaveFormat保存do文件   在ModelSimSE窗口点击sim窗口的tb文件   点击File SaveDatasetsim保存wlf文件  之后如果需要重......
  • Shell编程
           判断链接:linux下shell中if的“-e,-d,-f”是什么意思「建议收藏」-全栈程序员必看(javaforall.cn)            ......
  • 实战案例!Python批量识别银行卡号码并且写入Excel,小白也可以轻松使用~
    大家好,这里是程序员晚枫,今天我们继续学习Python自动化办公:每次有新员工入职,都要收集大量的工资卡信息,并且生成Excel文档,能不能用Python准确、快速地解决呢?今天我们就来学......
  • leveldb在Windows和Linux上编译
    leveldb在Windows和Linux上编译 LevelDB是Google传奇工程师JeffDean和SanjayGhemawat开源的KV存储引擎(而非SQL),它是一种非关系型数据库。leveldb只有一层,即objects,也即key......
  • RealWorld CTF 5th ShellFind 分析
    前言RealWorldCTF5th里的一道iot-pwn,根据真实设备固件改编而成,觉得题目贴近iot实战且很有意思,故在此记录一下复现过程。题目分析题目描述HelloHacker.Youdon'tk......
  • Android Files.delete()使用try-catch依旧出错
    提问: 我想做一个供自己使用的文件编辑器,其中有一个删除指定文件的功能(第105行开始):  我使用了catch语句抓住错误,可是当找不到指定文件时仍旧闪退。具体详情:  ......
  • 谷粒商城--整合Elasticsearch和商品的上架
    整合Elasticsearch和商品的上架​​一、整合ES​​​​ES常用概念​​​​索引,类型,文档是什么?​​​​倒排索引​​​​相关度分数score的计算​​​​安装ES和Kibana​​​......