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

代码如下:


	// 此处navMenu 组件中:index="navMenu.sn"
	

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引用的版本不对
element ui的菜单default-active默认选中的问题_第1张图片
于是乎查看el-menu的源码
element ui的菜单default-active默认选中的问题_第2张图片
果然对default-active的处理不一样,所以最后解决办法就是更新引用的element-ui的版本啊……

更新版本:

1、修改package.json文件里"element-ui"的版本号
改"element-ui": “^2.4.11”
为"element-ui": “^2.4.2”
2、在项目根目录下运行命令
npm install --save
3、发现node_modules下的element-ui文件夹压根没更新!!!
4、找到package-lock.json文件里"element-ui"配置的那一大段,删掉,保存文件。
5、再次在项目根目录下运行命令
npm install --save
6、发现node_modules下的element-ui文件夹总算是更新了,但是package-lock.json里新出现的版本好像不是我指定的版本,不重要,就这样吧。
PS:
在第一次npm install --save后,发现node_modules下的element-ui文件夹压根没更新时,可以删除node_modules下的element-ui文件夹,甚至删除整个node_modules下的所有文件夹,然后再次npm install --save即可。

查看源码确认:

element ui的菜单default-active默认选中的问题_第3张图片
虽然最新版本updateActiveIndex部分跟最老的版本一致,但是更新了watch部分监控defaultActive变化。

defaultActive(value){
	if(!this.items[value]){
		this.activeIndex = null
	}
	this.updateActiveIndex(value)
}

你可能感兴趣的:(element)