el-submenu折叠失效，文字和＞显示

原创已于 2023-07-13 16:11:11 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-07-13 14:37:59 首次发布

vue 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了在使用Element-UI框架时遇到的子菜单文字和展开图标在折叠状态下无法隐藏的问题。通过分析发现，错误地在`<el-menu>`标签内使用了`<div>`标签而非推荐的`<el-menu-item>`、`<el-submenu>`等组件，导致折叠效果失效。解决方案是通过CSS样式设置，将`.el-menu--collapse .el-submenu__title span`和`.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow`的显示属性设为none，从而实现折叠时隐藏文字和展开图标。

el-submenu折叠文字和＞显示

问题
在这里插入图片描述

注意<style>标签中不要加scope，否则导致>还是无法隐藏

/*由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一，但是却嵌套了<div>,而导致收折就隐藏不了文字*/
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}