欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于element?ui的菜單default-active默認(rèn)選中的問(wèn)題

 更新時(shí)間:2022年05月23日 14:50:56   作者:Beam007  
這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認(rèn)選中的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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í)例

    這篇文章主要介紹了詳解vue+vueRouter+webpack的簡(jiǎn)單實(shí)例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-06-06
  • vue 解決IOS10低版本白屏的問(wèn)題

    vue 解決IOS10低版本白屏的問(wèn)題

    這篇文章主要介紹了vue 解決IOS10低版本白屏的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-11-11
  • 封裝一下vue中的axios示例代碼詳解

    封裝一下vue中的axios示例代碼詳解

    這篇文章主要介紹了封裝一下vue中的axios,本文通過(guò)示例代碼給大家介紹的非常詳細(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ù)更新的方法示例

    這篇文章主要介紹了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-10
  • Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟

    Vite創(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-07
  • Vue的elementUI實(shí)現(xiàn)自定義主題方法

    Vue的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é)(推薦)

    這篇文章主要介紹了頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫

    vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫,圖片數(shù)量無(wú)限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • vue.js 添加 fastclick的支持方法

    vue.js 添加 fastclick的支持方法

    今天小編就為大家分享一篇vue.js 添加 fastclick的支持方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子

    VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子

    今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11

最新評(píng)論