關(guān)于element?ui的菜單default-active默認(rèn)選中的問(wèn)題
element ui的菜單default-active默認(rèn)選中
代碼如下
<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 () { // 獲取當(dāng)前頁(yè)面 菜單刷新后能自動(dòng)選中 let currentUrl = window.location.href let currentPage = currentUrl.split('/')[3].replace('#', '') this.currentMenu = currentPage } }
問(wèn)題如下
切換菜單,中的navMenu.sn===default-active的值一致,選中高亮正常。
但是!!
后退到首頁(yè),菜單樹里navMenu.sn沒有首頁(yè)home這個(gè)路由,navMenu.sn!==default-active選中前一個(gè)高亮始終不變。
照理說(shuō),navMenu.sn!==default-active不應(yīng)該選中高亮菜單才對(duì)。
于是思考
1、確認(rèn):index="navMenu.sn"的值和:default-active="currentMenu"的值是一致的
2、確認(rèn)菜單樹所有的navMenu.sn全部存在且唯一的
3、確認(rèn)樹生成在前,給default-active賦值再后,可以通過(guò)setTimeout延遲改變currentMenu的值,發(fā)現(xiàn)若改成存在的菜單,選中高亮正常,若設(shè)置為空或不存在的菜單,選中高亮停留在前一個(gè)。
4、官方文檔NavMenu導(dǎo)航菜單有一個(gè)回調(diào)事件,select:菜單激活回調(diào),index: 選中菜單項(xiàng)的 index, indexPath: 選中菜單項(xiàng)的 index path,按照例子的寫法加了之后,問(wèn)題仍然存在。
5、手上兩個(gè)系統(tǒng),同樣的用到了element ui的NavMenu導(dǎo)航菜單,一個(gè)存在問(wèn)題一個(gè)不存在。
對(duì)比代碼發(fā)現(xiàn)沒有什么不同,費(fèi)解。
最后發(fā)現(xiàn)
兩個(gè)項(xiàng)目element-ui引用的版本不對(duì)
于是乎查看el-menu的源碼(左-v2.4.2;右-v2.4.11)
果然對(duì)default-active的處理不一樣……
所以最后解決辦法就是更新引用的element-ui的版本啊……
更新版本
更新至最新版本v2.8.2
1、刪除node_modules下的element-ui文件夾
2、運(yùn)行命令npm install --save,將默認(rèn)下載package.json中配置的大版本下的最新版本
若下載的版本不是最新
1、刪除node_modules下的element-ui文件夾
2、找到package-lock.json文件里"element-ui"配置的那一大段,刪掉,保存文件。
3、運(yùn)行命令npm install --save,將默認(rèn)下載最新版本
更新完查看源碼確認(rèn)
退回至原始版本v2.4.2
運(yùn)行命令npm install --save element-ui@2.4.2
PS:
修改package.json文件里"element-ui"的版本號(hào),改"2.4.11",為 “2.4.2”,再npm install并沒有什么用處。
因?yàn)閚pm install 將默認(rèn)下載package.json中配置的大版本下的最新版本,如需鎖定版本,去掉package.json中配置的版本號(hào)前面的小尖尖^。
最新說(shuō)明
當(dāng)前使用element ui@2.15.1好像沒有文中的問(wèn)題了,貌似官方修復(fù)了這個(gè)bug。
element菜單默認(rèn)展開和選中
這兩個(gè)屬性
- :default-openeds="openeds"
- default-active="/networkConfig"中設(shè)置的要與數(shù)組中的index保持一致。
openeds也是數(shù)組
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue+vueRouter+webpack的簡(jiǎn)單實(shí)例
這篇文章主要介紹了詳解vue+vueRouter+webpack的簡(jiǎn)單實(shí)例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新的方法示例
這篇文章主要介紹了Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
隨著 Vite2 的發(fā)布并日趨穩(wěn)定,現(xiàn)在越來(lái)越多的項(xiàng)目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟,感興趣的可以了解一下2021-07-07Vue的elementUI實(shí)現(xiàn)自定義主題方法
下面小編就為大家分享一篇Vue的elementUI實(shí)現(xiàn)自定義主題方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)(推薦)
這篇文章主要介紹了頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫,圖片數(shù)量無(wú)限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11