關於element ui的菜單default-active默認選中的問題

Posted on by

element ui的菜單default-active默認選中

代碼如下

<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 [email protected] 

PS：

修改package.json文件裡"element-ui"的版本號，改"2.4.11"，為 “2.4.2”，再npm install並沒有什麼用處。

因為npm install 將默認下載package.json中配置的大版本下的最新版本，如需鎖定版本，去掉package.json中配置的版本號前面的小尖尖^。

最新說明

當前使用element [email protected]好像沒有文中的問題瞭，貌似官方修復瞭這個bug。

element菜單默認展開和選中

這兩個屬性

  • :default-openeds="openeds"
  • default-active="/networkConfig"中設置的要與數組中的index保持一致。

openeds也是數組

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：