關(guān)于element?ui的菜單default-active默認(rè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)前頁面 菜單刷新后能自動(dòng)選中
let currentUrl = window.location.href
let currentPage = currentUrl.split('/')[3].replace('#', '')
this.currentMenu = currentPage
}
}問題如下
切換菜單，中的navMenu.sn===default-active的值一致，選中高亮正常。
但是??！
后退到首頁，菜單樹里navMenu.sn沒有首頁home這個(gè)路由，navMenu.sn!==default-active選中前一個(gè)高亮始終不變。
照理說，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賦值再后，可以通過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，按照例子的寫法加了之后，問題仍然存在。
5、手上兩個(gè)系統(tǒng)，同樣的用到了element ui的NavMenu導(dǎo)航菜單，一個(gè)存在問題一個(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)前面的小尖尖^。
最新說明
當(dāng)前使用element ui@2.15.1好像沒有文中的問題了，貌似官方修復(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的簡單實(shí)例
這篇文章主要介紹了詳解vue+vueRouter+webpack的簡單實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了vue 解決IOS10低版本白屏的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了封裝一下vue中的axios，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新的方法示例
這篇文章主要介紹了Vue.js中provide/inject實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)更新，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現(xiàn)在越來越多的項(xiàng)目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟，感興趣的可以了解一下2021-07-07
Vue的elementUI實(shí)現(xiàn)自定義主題方法
下面小編就為大家分享一篇Vue的elementUI實(shí)現(xiàn)自定義主題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
頁面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)（推薦）
這篇文章主要介紹了頁面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫，圖片數(shù)量無限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
今天小編就為大家分享一篇vue.js 添加 fastclick的支持方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11