vue使用el-menu折叠时，导航文字不隐藏问题

最新推荐文章于 2025-07-05 15:46:59 发布

coderhuihui

最新推荐文章于 2025-07-05 15:46:59 发布

阅读量8.6k

点赞数 19

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40580023/article/details/103778414

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了解决 Element-UI 的 <el-menu> 在折叠状态下无法隐藏文字的问题，提供了两种解决方案：一是通过自定义 CSS 样式隐藏文字和图标；二是更改嵌套元素为 <template>。同时也讨论了在菜单栏组件化时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题截图

这是由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一，但是却嵌套了<div>,而导致收折就隐藏不了文字。

解决方式一：可以自己在加css样式隐藏；

如：

<style>  

  /*隐藏文字*/
  .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
  /*隐藏 > */
  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }
</style>

解决方式二：不使用div，把div改为<template>即可

但是若将菜单栏弄成组件，层层遍历，那么根目录下<div>就不可缺少，

添加样式后，成功隐藏文字（这里是后面修改了很多样式之后才添加的，所以跟上面出现的问题截图不一样）