vue实现menu菜单懒加载

最新推荐文章于 2024-08-26 09:55:56 发布

原创最新推荐文章于 2024-08-26 09:55:56 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

业务相关专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Element UI实现菜单懒加载功能，通过动态请求接口获取下级菜单，提供了代码示例和最终效果展示。

本文将在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>

内部具体实现：

...

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

...

最后效果图：