Vue el-menu 父级菜单不高亮
如果您使用的是 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 属性用于设置菜单项的激活类名。您可以根据需要自定义这些属性的值。
原文地址: https://www.cveoy.top/t/topic/bgPk 著作权归作者所有。请勿转载和采集!