vue實現menu菜單懶加載

本文將在vue+element ui項目中簡單實現menu菜單的懶加載。

最近接到這樣的需求：菜單的選項不要固定的，而是下一級菜單選項需要根據上級菜單調接口來獲取。what? 這不就是懶加載嗎？翻了一遍element ui文檔，並沒有找到menu菜單的懶加載，於是乎就自己手寫一個啦。

首先最外層，子菜單打開的觸發方式為click，用於之后點擊調接口：

<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" menu-trigger="click" unique-opened>...</el-menu>

 

內部具體實現：

html:

...

<el-submenu v-if="business == 3" index="1-1-2"  class="bgkh" @click.native="clickSub('1-1-2')">
  <template slot="title">致函客戶—中文</template>
  <el-menu-item index="loading" v-if="loading">加載中...</el-menu-item>
  <el-menu-item index="noData" v-if="noData">無數據</el-menu-item>
  <el-submenu :index="`1-1-2-1-${index}`" v-for="(item,index) in jieduanList" :key="index" @click.native="queryMailTypeAll(1,item.jieduan)">
    <template slot="title">{{item.jieduan}}</template>
    <el-menu-item index="nextLoading" v-if="nextLoading">加載中...</el-menu-item>
    <el-menu-item index="nextNoData" v-if="nextNoData">無數據</el-menu-item>
    <el-menu-item :index="`1-1-2-1-${index}-${ind}`" v-for="(it,ind) in mailTypeAllList">{{it.mailTypeDesc}}</el-menu-item>
  </el-submenu>
</el-submenu>

...

js:

...

queryMailTypeAll(businessType,jieduan){
      this.nextLoading = true
      this.nextNoData = false
      this.mailTypeAllList = []
      queryMailTypeAll({
        businessType,
        jieduan,
        caseIds:this.multipleSelection.map(item=>item.caseId)
      }).then(res=>{
        this.nextLoading = false
        this.mailTypeAllList = res.data.filter(item=>!!item)
        this.mailTypeAllList&&!this.mailTypeAllList.length&&(this.nextNoData = true)
      }).catch(err=>{
        this.mailTypeAllList = []
        this.nextLoading = false
        this.nextNoData = true
      })
    },
    queryJieduan(businessType){
      this.loading = true
      this.noData = false
      this.jieduanList = []
      queryJieduan({
        caseIds:this.multipleSelection.map(item=>item.caseId),
        businessType
      }).then(res=>{
        this.loading = false
        this.jieduanList = res.data.filter(item=>!!item)
        this.jieduanList&&!this.jieduanList.length&&(this.noData = true)
      }).catch(err=>{
        this.jieduanList = []
        this.loading = false
        this.noData = true
      })
    },
    clickSub(key){
      this.business == 3 && key == '1-1-2' && (this.queryJieduan(1))
      this.business == 3 && key == '1-1-3' && (this.queryJieduan(2))
    }

...

 

最后效果圖：

 

 

 

 

完事兒收工，簡易的模擬懶加載效果實現啦！此寫法為最初版本，還可以根據業務需求進行更深層次的封裝達到復用。