vue实现menu菜单懒加载

本文将在vue+element ui项目中简单实现menu菜单的懒加载。

最近接到这样的需求：菜单的选项不要固定的，而是下一级菜单选项需要根据上级菜单调接口来获取。what? 这不就是懒加载吗？翻了一遍element ui文档，并没有找到menu菜单的懒加载，于是乎就自己手写一个啦。

首先最外层，子菜单打开的触发方式为click，用于之后点击调接口：

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

内部具体实现：

html:

 1 ...
 2
 3 <el-submenu v-if="business == 3" index="1-1-2"  class="bgkh" @click.native="clickSub('1-1-2')">
 4   <template slot="title">致函客户—中文</template>
 5   <el-menu-item index="loading" v-if="loading">加载中...</el-menu-item>
 6   <el-menu-item index="noData" v-if="noData">无数据</el-menu-item>
 7   <el-submenu :index="`1-1-2-1-${index}`" v-for="(item,index) in jieduanList" :key="index" @click.native="queryMailTypeAll(1,item.jieduan)">
 8     <template slot="title">{{item.jieduan}}</template>
 9     <el-menu-item index="nextLoading" v-if="nextLoading">加载中...</el-menu-item>
10     <el-menu-item index="nextNoData" v-if="nextNoData">无数据</el-menu-item>
11     <el-menu-item :index="`1-1-2-1-${index}-${ind}`" v-for="(it,ind) in mailTypeAllList">{{it.mailTypeDesc}}</el-menu-item>
12   </el-submenu>
13 </el-submenu>
14
15 ...

js:

 1 ...
 2
 3 queryMailTypeAll(businessType,jieduan){
 4       this.nextLoading = true
 5       this.nextNoData = false
 6       this.mailTypeAllList = []
 7       queryMailTypeAll({
 8         businessType,
 9         jieduan,
10         caseIds:this.multipleSelection.map(item=>item.caseId)
11       }).then(res=>{
12         this.nextLoading = false
13         this.mailTypeAllList = res.data.filter(item=>!!item)
14         this.mailTypeAllList&&!this.mailTypeAllList.length&&(this.nextNoData = true)
15       }).catch(err=>{
16         this.mailTypeAllList = []
17         this.nextLoading = false
18         this.nextNoData = true
19       })
20     },
21     queryJieduan(businessType){
22       this.loading = true
23       this.noData = false
24       this.jieduanList = []
25       queryJieduan({
26         caseIds:this.multipleSelection.map(item=>item.caseId),
27         businessType
28       }).then(res=>{
29         this.loading = false
30         this.jieduanList = res.data.filter(item=>!!item)
31         this.jieduanList&&!this.jieduanList.length&&(this.noData = true)
32       }).catch(err=>{
33         this.jieduanList = []
34         this.loading = false
35         this.noData = true
36       })
37     },
38     clickSub(key){
39       this.business == 3 && key == '1-1-2' && (this.queryJieduan(1))
40       this.business == 3 && key == '1-1-3' && (this.queryJieduan(2))
41     }
42
43 ...

最后效果图：

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