给el-menu组件的el-menu-item添加选中后的背景色

在Element UI中，您可以通过覆盖CSS样式来修改el-menu-item的选中背景色。以下是一个例子，展示了如何通过自定义类来更改背景色：

1. 首先，定义一个自定义类，比如.custom-active-menu-item，并设置您想要的背景色。

.custom-active-menu-item {
  background-color: #f56c6c !important; /* 您想要的颜色 */
}

2. 然后，在您的Vue组件中，给el-menu-item添加该自定义类，并通过:class绑定来动态添加：

<template>
  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo">
    <el-menu-item index="1" @click="handleMenuClick" class="custom-active-menu-item">
      <!-- 菜单内容 -->
    </el-menu-item>
    <!-- 其他菜单项 -->
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      activeMenu: '1' // 假设当前激活的菜单项index是'1'
    };
  },
  methods: {
    handleMenuClick(index) {
      this.activeMenu = index; // 更新当前激活的菜单项
    }
  }
};
</script>

当el-menu-item被选中（activeMenu与其index相匹配）时，它将应用.custom-active-menu-item类，从而改变背景色。请注意，使用!important是为了确保覆盖Element UI的默认样式。