elementui的el-menu组件怎么实现点击一个让另一个是激活状态
时间: 2023-06-07 20:08:21 浏览: 95
Element-Ui组件 NavMenu 导航菜单的具体使用
3星 · 编辑精心推荐
可以使用el-menu组件的@select事件来监听菜单项被选中的情况,然后通过设置当前激活菜单项的索引来实现点击一个菜单项让另一个菜单项成为激活状态。具体代码实现如下:
```
<template>
<el-menu @select="handleMenuSelect" :default-active="$route.path">
<el-menu-item index="/home">首页</el-menu-item>
<el-menu-item index="/about">关于我们</el-menu-item>
<el-menu-item index="/products">产品中心</el-menu-item>
<el-menu-item index="/contact">联系我们</el-menu-item>
</el-menu>
</template>
<script>
export default {
methods: {
handleMenuSelect(index) {
// 设置当前激活菜单项的索引
this.$router.push(index);
}
}
}
</script>
```
以上代码中,我们通过监听el-menu组件的@select事件来获取被选中的菜单项的索引,然后使用this.$router.push(index)来设置当前激活菜单项的索引。这样就实现了点击一个菜单项让另一个菜单项成为激活状态的效果。
阅读全文