NavMenu导航菜单el-submenu点击事件及激活状态变化
发布时间：2023-04-18 16:30
记录多级菜单时，NavMenu导航菜单的一级菜单点击事件以及当前激活状态变化
原因：
由于项目的需求变化，原本是点击二级子菜单才发生跳转，点击子菜单后，el-menu组件也会执行@select的方法，导航栏的菜单也会对应变成激活状态。但是，需求变成点击一级菜单也可以发生跳转，默认跳转到第一个子菜单的界面，el-menu没有实现可以点击el-submenu这一功能。
解决方案：
1.在el-submenu标签添加点击事件，@click.native，然后再从点击事件内实现跳转等事务，因为我的功能是默认跳转到第一个子菜单，故复用了@select的方法
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/eba27daf3bef4bd5aed8f2b68985f05f.png\")
注意：单纯使用@click没有效果
2.当前激活状态的改变，el-menu组件的:default-active属性等于当前的激活状态的菜单绑定的:index
所以，可以在data增加一个变量activeIndex,用来记录当前激活状态的菜单的:index的值， 然后el-menu组件的:default-active由变量activeIndex来控制。
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/664e678834df41d893ce07f6e62d1a6a.png\")
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/a1a83616355b4e1886f082ff6d8c2a40.png\")
每次点击菜单时，在@select的点击事件（因为我复用了这个方法）最后给变量activeIndex赋值当前的菜单的:index 即可。
相关推荐
微信小程序云开发用户身份登录_微信小程序+云开发实现欢迎登录注册
Linux-进程控制详解（进程创建+进程终止+进程等待+进程程序替换）
Python + SeaTable | 计算两个日期间的工作日天数
喜讯！喜讯！JeecgBoot Github超 30000 Star—这个低代码平台你还不知道吗？
【BDTC 2018】PingCAP申砾：做一个真正通用的数据库产品
C# 关于sendtoback()和bringtofront() 的特点说明
《SpringBoot系列十四》：@ConditionalOnBean、@ConditionalOnMissingBean注解居然失效了
SpringBoot接口 - API接口有哪些不安全的因素？如何对接口进行签名？
苹果4s怎么越狱_iPhone 12系列细节曝光：苹果调整屏幕尺寸
vue3 实现 todoList 知识点 reactive, toRefs, computed, watchEffect， filters，localStorage数据存储、获取