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的值，發(fā)現(xiàn)若改成存在的菜單，選中高亮正常，若設置為空或不存在的菜單，選中高亮停留在前一個。

4、官方文檔NavMenu導航菜單有一個回調(diào)事件，select：菜單激活回調(diào)，index: 選中菜單項的 index, indexPath: 選中菜單項的 index path，按照例子的寫法加了之后，問題仍然存在。

5、手上兩個系統(tǒng)，同樣的用到了element ui的NavMenu導航菜單，一個存在問題一個不存在。

對比代碼發(fā)現(xiàn)沒有什么不同，費解。

最后發(fā)現(xiàn)

兩個項目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中配置的版本號前面的小尖尖^。

最新說明

當前使用element ui@2.15.1好像沒有文中的問題了，貌似官方修復了這個bug。

element菜單默認展開和選中

這兩個屬性

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

openeds也是數(shù)組

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論