如果您使用的是 Vue el-menu 组件,而父级菜单没有高亮显示,可能是因为您没有正确配置 active-text 和 active-class 属性。

可以尝试添加以下代码来配置这些属性:

<el-menu
  default-active="1"
  class="el-menu-vertical-demo"
  :router="true"
  :default-openeds="['1']"
  active-text-color="#409EFF"
  :active-text="activeText"
  :active-class="activeClass">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>导航一</span>
    </template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
    <el-menu-item index="1-3">选项3</el-menu-item>
  </el-submenu>
  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-menu"></i>
      <span>导航二</span>
    </template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
  </el-submenu>
</el-menu>

<script>
export default {
  data() {
    return {
      activeText: 'active',
      activeClass: 'active'
    }
  }
}
</script>

在这个例子中,activeText 属性用于设置菜单项的激活文本,而 activeClass 属性用于设置菜单项的激活类名。您可以根据需要自定义这些属性的值。

Vue el-menu 父级菜单不高亮

原文地址: https://www.cveoy.top/t/topic/bgPk 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录