el-element中改变选中菜单项的文字颜色

在Element UI库中，如果你想要改变el-menu（下拉菜单）中选中项的文字颜色，你可以通过自定义主题（custom theme）来实现。首先，你需要获取到菜单元素并监听它的`active-item-change`事件。当某个选项被激活时，你可以修改对应文字的颜色。

下面是一个简单的示例，假设你已经安装了Element UI并且设置了全局主题：

import { Menu } from 'element-plus';

export default {
  mounted() {
    this.$el.addEventListener('active-item-change', (event) => {
      const selectedItem = event.item;
      if (selectedItem) {
        // 获取当前选中项的DOM节点
        const node = document.querySelector(`#your-menu-id > li.is-active > a`, this.$el);
        // 修改文字颜色，例如设置为红色
        node.style.color = 'red';
      }
    });
  },
}

在这个例子中，你需要将`#your-menu-id`替换为你实际的menu组件的唯一标识符。如果菜单有动态生成的情况，你可能需要调整查询方法以适应实际情况。

相关问题

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: /* 边框颜色 */;
}

element-plus中取消el-menu的选中状态

在element-plus中，取消el-menu的选中状态可以通过以下两种方式实现：

1. 使用v-model绑定当前选中的菜单项，在取消选中状态时将v-model的值设为null即可：

<el-menu v-model="selectedMenu">
  <el-menu-item index="1">菜单项1</el-menu-item>
  <el-menu-item index="2">菜单项2</el-menu-item>
</el-menu>

<script>
export default {
  data() {
    return {
      selectedMenu: null
    }
  }
}
</script>

2. 使用ref获取到el-menu实例，调用其方法`setCurrentIndex`将当前选中的菜单项索引设置为-1即可取消选中状态:

<template>
  <el-menu ref="menu">
    <el-menu-item index="1">菜单项1</el-menu-item>
    <el-menu-item index="2">菜单项2</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  mounted() {
    this.$refs.menu.setCurrentIndex(-1);
  }
}
</script>

以上两种方式均可实现取消el-menu的选中状态，具体选用哪种方式取决于你的实际需求。