如何修改Element-Plus中子菜单的下拉箭头样式

针对你遇到的Vue3+Element-Plus横向子菜单默认箭头无法直接自定义的问题，这里提供两种可行的解决方法：

方法一：CSS覆盖默认样式 #

Element-Plus的横向子菜单箭头对应类名为.el-sub-menu__icon-arrow，可以通过CSS直接覆盖其样式。如果你的样式是scoped的，需要使用深度选择器:deep()来穿透组件样式：

/* 基础箭头样式修改 */
:deep(.el-menu--horizontal .el-sub-menu__icon-arrow) {
  /* 修改箭头颜色 */
  color: #2c3e50;
  /* 调整箭头大小 */
  font-size: 14px;
  /* 调整与标题的间距 */
  margin-left: 6px;
  /* 可选：修改箭头初始方向，比如向上 */
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/* 子菜单展开时的箭头样式 */
:deep(.el-menu--horizontal .el-sub-menu.is-opened .el-sub-menu__icon-arrow) {
  /* 展开后旋转回向下 */
  transform: rotate(0deg);
}

如果是全局样式（未添加scoped），可以去掉:deep()直接编写样式。

方法二：自定义图标替换默认箭头 #

通过el-sub-menu的title插槽自定义标题内容，同时隐藏默认箭头，用自定义图标替代：

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-sub-menu class="custom-submenu" index="1">
      <template #title>
        <span>1. Introductions</span>
        <!-- 使用Element-Plus内置图标，也可替换为自定义SVG图标 -->
        <el-icon class="custom-arrow">
          <ChevronDown />
        </el-icon>
      </template>
      <el-menu-item index="1-1">item one</el-menu-item>
      <el-menu-item index="1-2">item two</el-menu-item>
      <el-menu-item index="1-3">item three</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ChevronDown } from '@element-plus/icons-vue'
import { ref } from 'vue'

// 按需定义菜单激活状态和选择事件逻辑
const activeIndex = ref('1')
const handleSelect = (index) => {
  console.log('选中菜单：', index)
}
</script>

<style scoped>
/* 隐藏默认箭头 */
:deep(.custom-submenu .el-sub-menu__icon-arrow) {
  display: none;
}

/* 自定义箭头样式 */
.custom-arrow {
  margin-left: 6px;
  color: #2c3e50;
  transition: transform 0.3s ease;
}

/* 展开时旋转箭头 */
:deep(.custom-submenu.is-opened .custom-arrow) {
  transform: rotate(180deg);
}
</style>

注意事项 #

• 若使用scoped样式，必须通过:deep()修改Element-Plus组件内部样式，否则样式不会生效；
• 自定义图标时，需确保已正确引入对应组件（比如Element-Plus图标需单独导入）；
• 可根据需求自由调整颜色、大小、旋转角度、过渡动画等样式属性。

内容的提问来源于stack exchange，提问作者coochie