el-menu设置二级菜单栏颜色

### 自定义 Element UI 中 `el-menu` 组件的二级菜单栏颜色 为了自定义 `el-menu` 组件中二级菜单的颜色，可以通过 CSS 或者 SCSS 来覆盖默认样式。具体来说，可以针对 `.el-menu--inline .el-menu-item` 和其他相关类名应用特定的选择器来修改背景色、文字颜色等。 #### 使用全局样式文件 如果项目允许，在项目的全局样式文件（如 `style.css` 或 `app.scss`）中添加以下代码： ```css /* 修改二级菜单项的文字颜色 */ .el-menu--inline .el-menu-item { color: #ff0000; /* 设置为红色作为例子 */ } /* 修改鼠标悬停时二级菜单项的背景颜色 */ .el-menu--inline .el-menu-item:hover { background-color: #f5f7fa; } /* 修改选中状态下的二级菜单项背景颜色 */ .el-menu--inline .is-active { background-color: #e6a23c !important; } ``` 上述代码片段通过选择器指定了不同状态下二级菜单项的颜色变化[^1]。 #### 局部作用域内使用 `<style scoped>` 标签 对于单文件组件 (SFC)，可以在局部范围内利用 Vue 的 `<style scoped>` 特性来进行定制化设计： ```html <template> <!-- 菜单模板 --> </template> <script setup lang="ts"> // ... script content ... </script> <style scoped> /* 只影响当前组件内的元素 */ .el-menu--inline >>> .el-menu-item { color: blue; } .el-menu--inline >>> .el-menu-item:hover { background-color: lightblue; } .el-menu--inline >>> .is-active { background-color: darkcyan !important; } </style> ``` 注意这里使用了 `/deep/` 或 `>>>` 操作符穿透到子组件内部样式[^2]。 #### 动态绑定 class 实现更灵活控制 还可以考虑动态绑定额外的 class 到具体的 menu item 上面，从而实现更加复杂的逻辑处理： ```javascript <template> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title">导航一</template> <el-menu-item v-for="(item, key) in items" :key="key" :class="[customClass]" @click="handleClick(item)"> {{ item.name }} </el-menu-item> </el-submenu> </el-menu> </template> <script setup lang="ts"> import { ref } from 'vue'; const customClass = computed(() => ({ myCustomMenuItemStyle: true, })); function handleClick(item: any): void { console.log(`Clicked on ${item.name}`); } </script> <style scoped> .myCustomMenuItemStyle { color: greenyellow; } </style> ``` 这种方法提供了更大的灵活性去根据不同条件调整样式[^3]。