el-menu 省略图标 el-sub-menu el-sub-menu__hide-arrow
时间: 2025-02-20 08:40:56 浏览: 94
### 隐藏 Element UI `el-menu` 中 `el-sub-menu` 的默认箭头
为了隐藏 `el-menu` 组件内 `el-sub-menu` 默认的下拉箭头,可以应用自定义 CSS 样式。具体实现方法如下:
#### 方法一:全局隐藏所有子菜单箭头
如果目标是隐藏所有的子菜单箭头,则可以直接利用 `.el-submenu__icon-arrow` 类名设置其 `display` 属性为 `none`。
```css
.el-submenu .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
```
此段代码会作用于页面上每一个 `el-submenu` 实例下的箭头图标[^1]。
#### 方法二:仅隐藏特定位置的子菜单箭头
当只需要移除某一部分而非全部的子菜单箭头时,可以通过更精确的选择器定位到具体的元素并施加相同的样式规则。例如,在水平模式 (`mode="horizontal"`) 下只影响第一个子项的情况可参照以下做法:
```css
/* 使用 :nth-child() 或其他适当选择器 */
li:nth-child(1) ::v-deep .el-submenu__title .el-icon-arrow-down {
display: none !important;
}
```
这里使用了 Vue 特有的深度选择符 `/deep/` 来确保样式能够穿透至 scoped 样式的作用域之外,并且针对指定索引的列表项进行了特殊处理[^4]。
需要注意的是,对于某些版本较新的项目可能不再支持 `/deep/` 语法,此时应该考虑替换为 `::v-deep` 或者直接在根级样式表中定义这些规则以避开scoped样式的限制。
另外一种情况是在垂直布局(`vertical`)的情况下调整箭头方向的同时也可以将其隐藏:
```css
/* 菜单关闭状态下 */
.el-submenu /deep/ .el-submenu__title .el-submenu__icon-arrow{
display:none!important;
}
/* 当菜单被打开时同样保持不可见 */
.el-submenu.is-opened /deep/ .el-submenu__title .el-submenu__icon-arrow{
display:none!important;
}
```
上述代码不仅适用于未激活状态也涵盖了已展开的状态[^5]。
阅读全文
相关推荐











