NavMenu导航菜单el-submenu点击事件及激活状态变化

记录多级菜单时,NavMenu导航菜单的一级菜单点击事件以及当前激活状态变化

原因:
由于项目的需求变化,原本是点击二级子菜单才发生跳转,点击子菜单后,el-menu组件也会执行@select的方法,导航栏的菜单也会对应变成激活状态。但是,需求变成点击一级菜单也可以发生跳转,默认跳转到第一个子菜单的界面,el-menu没有实现可以点击el-submenu这一功能。

解决方案:
1.在el-submenu标签添加点击事件,@click.native,然后再从点击事件内实现跳转等事务,因为我的功能是默认跳转到第一个子菜单,故复用了@select的方法
在这里插入图片描述

注意:单纯使用@click没有效果
2.当前激活状态的改变,el-menu组件的:default-active属性等于当前的激活状态的菜单绑定的:index
所以,可以在data增加一个变量activeIndex,用来记录当前激活状态的菜单的:index的值, 然后el-menu组件的:default-active由变量activeIndex来控制。
在这里插入图片描述

在这里插入图片描述

每次点击菜单时,在@select的点击事件(因为我复用了这个方法)最后给变量activeIndex赋值当前的菜单的:index 即可。

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值