el-menu-item选中改变颜色

要修改el-menu-item选中后的颜色，你可以使用 .el-menu-item.is-active 选择器，并设置样式属性 background-color。在样式中添加 !important 可以提高优先级。例如:

.el-menu-item.is-active {
background-color: #2D3D51 !important;
color: #18909B !important;
}

这样，当el-menu-item被选中时，背景颜色和字体颜色都会改变。请注意，你也可以根据需要修改其他样式属性。希望这可以帮到你！

相关问题

el-menu-item选中改变的颜色 在子页面我也想常亮

在Vue.js中，`el-menu-item`是Element UI库中的菜单项组件，其默认选中的样式会有一个高亮效果。如果你想在子页面保持这种选中状态并让它一直显示为"常亮"，通常你可以通过以下步骤实现：

1. **数据绑定**: 首先，在父组件（通常是导航栏或者路由守卫）中维护当前选中的`menuItem`的状态，例如一个数组或者对象，记录每个`el-menu-item`的`key`或`value`。

<el-menu :default-active="$route.meta.key">
  <el-menu-item v-for="(item, index) in menuItems" :key="index"
                :index="item.key"
                @click="handleItemClick(item)">
    {{ item.name }}
  </el-menu-item>
</el-menu>

<script>
export default {
  data() {
    return {
      menuItems: [
        { name: '首页', key: 'home' },
        // 更多菜单项...
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      this.$router.push({ path: item.path, meta: { key: item.key } });
      // 或者更新数据表示该项已选中，如：
      this.selectedMenuItem = item;
    }
  }
};
</script>

2. **传递状态到子组件**: 使用props将选中的`menuItem`传给子组件，并在子组件的模板上展示相应状态。

<template>
  <div :class="{ active: isActive === selectedMenuItem.key }"> <!-- 检查是否匹配选中的key -->
    <!-- 子页面内容... -->
  </div>
</template>

<script>
export default {
  props: ['selectedMenuItem'],
  computed: {
    isActive() {
      // 判断当前子组件是否处于父菜单选中的路径
      // 示例：假设子组件是通过动态路由渲染，可以根据路由params获取menuKey
      return this.$route.params.menuKey === this.selectedMenuItem.key;
    }
  }
};
</script>

3. **样式调整**: 如果需要保持选中颜色始终一致，可以在子组件的CSS中覆盖默认的`el-menu-item`样式，添加一个持久的高亮类。

.active {
  background-color: /* 你想要的颜色 */;
  border-color: /* 边框颜色 */;
}

如何改变el-menu-item选中时底部下划线颜色

你可以设置`el-menu-item`组件的`active-text-color`属性来改变选中时底部下划线的颜色。例如：

<el-menu-item index="1" active-text-color="#f00">菜单项1</el-menu-item>

在这个例子中，我们将选中时的文本颜色设置为红色，同时底部下划线的颜色也会变为红色。

如果你想对所有的菜单项都进行这个设置，可以在CSS中添加如下样式：

.el-menu-item.is-active {
  border-bottom-color: #f00;
}

这个样式会在菜单项被选中时将底部下划线的颜色改为红色。