elementui NavMenu導航選單預設展開

qq_32209081發表於2020-10-30

近期專案用vue+element ui 做了一個新的後臺管理系統 用到了選單模組, 功能需要他重新整理返回自動展開原本的導航列表,經過網上搜尋發現 現有網上的部落格都不能實現(可能是我自己的原因),經過摸索發現,預設展開導航需要兩個關鍵屬性default-openeds和default-active,官網上解釋的 當前啟用選單的 index 和 當前開啟的 sub-menu 的 index 的陣列,多的不嗶嗶了 上程式碼看就懂了

在這裡插入圖片描述

:default-openeds="defalut"中的defalut指的是['1-4']這種
<el-menu
     :default-active="$route.path"
     :default-openeds="defalut"
     class="el-menu-vertical-demo"
     @open="handleOpen"
     @close="handleClose"
     @select="selected"
     background-color="#34495F"
     active-background="#fff"
     active-text-color="#000"
>
</el-menu>
let store = storage.getItem('active')
    if(store){
        this.activeDefault = store[0]
        this.defalut.push(store[1])
        console.log(this.defalut)
    }
    window.addEventListener('beforeunload',()=>{
        storage.setItem('active',this.activeDefault)
        console.log(this.defalut)
    })
handleOpen(key, keyPath) {
      this.activeDefault = keyPath;
      console.log(key, keyPath);
    },

相關文章