element ui的菜单default-active默认选中的问题

当在Element UI的NavMenu中遇到default-active选中问题时,通过对比不同版本的源码,发现版本差异导致问题出现。更新element-ui到v2.8.2解决了问题。但发现最新版本v2.15.1已修复该bug,无需特殊处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码如下:

<el-menu router :default-active="currentMenu" active-text-color="#7BE4FF" :unique-opened="true">
	// 此处navMenu 组件中:index="navMenu.sn"
	<navMenu :navMenus="menuData"></navMenu>
</el-menu>
watch: {
	'$route' (to, from) {
		this.getCurrentMenu()
	}
},
methods: {
	getCurrentMenu () {
		// 获取当前页面 菜单刷新后能自动选中
		let currentUrl = window.location.href
		let currentPage = currentUrl.split('/')[3].replace('#', '')
		this.currentMenu = currentPage
	}
}

问题如下:

切换菜单,中的navMenu.sn===default-active的值一致,选中高亮正常。
但是!!
后退到首页,菜单树里navMenu.sn没有首页home这个路由,navMenu.sn!==default-active选中前一个高亮始终不变。
照理说,navMenu.sn!==default-active不应该选中高亮菜单才对。

于是思考:

1、确认:index="navMenu.sn"的值和:default-active="currentMenu"的值是一致的
2、确认菜单树所有的navMenu.sn全部存在且唯一的
3、确认树生成在前,给default-active赋值再后,可以通过setTimeout延迟改变currentMenu的值,发现若改成存在的菜单,选中高亮正常,若设置为空或不存在的菜单,选中高亮停留在前一个。
4、官方文档NavMenu导航菜单有一个回调事件
select:菜单激活回调,index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
按照例子的写法加了之后,问题仍然存在。
5、手上两个系统,同样的用到了element ui的NavMenu导航菜单,一个存在问题一个不存在。
对比代码发现没有什么不同,费解。

最后发现:

两个项目element-ui引用的版本不对
在这里插入图片描述
于是乎查看el-menu的源码(左-v2.4.2;右-v2.4.11)
在这里插入图片描述
果然对default-active的处理不一样……
所以最后解决办法就是更新引用的element-ui的版本啊……

更新版本:

更新至最新版本v2.8.2

1、删除node_modules下的element-ui文件夹
2、运行命令npm install --save,将默认下载package.json中配置的大版本下的最新版本
若下载的版本不是最新,
1、删除node_modules下的element-ui文件夹
2、找到package-lock.json文件里"element-ui"配置的那一大段,删掉,保存文件。
3、运行命令npm install --save,将默认下载最新版本
更新完查看源码确认
在这里插入图片描述

退回至原始版本v2.4.2

运行命令npm install --save element-ui@2.4.2
PS:
修改package.json文件里"element-ui"的版本号,改"2.4.11",为 “2.4.2”,再npm install并没有什么用处。
因为npm install 将默认下载package.json中配置的大版本下的最新版本,如需锁定版本,去掉package.json中配置的版本号前面的小尖尖^。

另附参考文章

《package.json和package-lock.json》
https://blog.youkuaiyun.com/Beam007/article/details/123850741

最新说明

当前使用element ui@2.15.1好像没有文中的问题了,貌似官方修复了这个bug。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值