选中el-sub-menu的时候也高亮
时间: 2024-08-16 17:05:46 浏览: 33
当在Vue.js的Element UI组件库中,如果你想要实现点击`el-sub-menu`(子菜单)时能够使其高亮显示,通常可以在处理菜单遍历或点击事件的地方做文章。你可以给每个`el-sub-menu`添加一个`active`属性,并通过管理这个属性来控制高亮效果。例如,在点击事件处理器中检查当前激活的菜单,如果点击的是目标菜单,则将其设置为`active`,同时将其他非激活状态的子菜单设为默认样式。
以下是一个简单的示例:
```html
<template>
<el-menu default-active="1">
<el-submenu v-for="(item, index) in menuList" :index="index + ':' + item.name">
<template slot="title">{{ item.name }}</template>
<el-menu-item v-for="subItem in item.children" :index="subItem.name">
{{ subItem.name }}
</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
menuList: [
{ name: '一级菜单1', children: [{ name: '二级菜单1-1' }] },
//...
]
};
},
methods: {
handleMenuClick(item) {
this.$refs.menu.forEach(menu => {
if (menu.index === item.index) {
menu.activeIndex = item.index;
} else {
menu.activeIndex = null; // 清除其他子菜单的高亮
}
});
}
},
mounted() {
this.$nextTick(() => {
// 初始化高亮第一个菜单
this.handleMenuClick(this.menuList);
});
}
};
</script>
```
在这个例子中,`handleMenuClick`方法会在每次点击时调整子菜单的`activeIndex`。注意,你需要确保你的`el-menu`有一个ref,以便可以操作它的实例。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)