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))
    }

...

 

最后效果图：

 

 

 

 

完事儿收工，简易的模拟懒加载效果实现啦！此写法为最初版本，还可以根据业务需求进行更深层次的封装达到复用。