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

最后效果图:

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

vue实现menu菜单懒加载的更多相关文章

  1. vue + vue-lazyload 实现图片懒加载

    1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...

  2. Vue实现一个图片懒加载插件(转载)

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  3. vue.js 二 路由懒加载

    当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面 才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目 ...

  4. 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载

    当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...

  5. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  6. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  7. Vue图片懒加载

    图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...

  8. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  9. vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 ...

随机推荐

  1. deeplearning模型分析

    deeplearning模型分析 FLOPs paddleslim.analysis.flops(program, detail=False) 获得指定网络的浮点运算次数(FLOPs). 参数: pr ...

  2. 开发平台支持Arm Cortex-M的微控制器上人工智能训练

    开发平台支持Arm Cortex-M的微控制器上人工智能训练 Development platform enables AI training on Arm Cortex-M-based microc ...

  3. redis分布式锁扣减库存弊端: 吞吐量低, 解决方法:使用 分段锁 分布式分段锁并发扣减库存--代码实现

    package tech.codestory.zookeeper.aalvcai.ConcurrentHashMapLock; import lombok.AllArgsConstructor; im ...

  4. th:insert、th:replace、th:include抽取和引用页面公共片段、传参等

    一.抽取公共片段 th:fragment  给片段命名 将公共片段抽取出来,并在顶级标签内使用th:fragment给该片段命名. 例如:将公共片段抽取出来放到comment/bar.html中: & ...

  5. 【NX二次开发】Block UI 指定点

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  6. 「JVM」知识点详解一:JVM运行原理详解

    前言 JVM 一直都是面试的必考点,大家都知道,但是要把它搞清楚又好像不是特别容易.JVM 的知识点太散,不系统,今天带大家详细的了解一下jvm的运行原理. 正文 1 什么是JVM? JVM是Java ...

  7. csp-s模拟测试58「Divisors」·「Market」·「Dash Speed」

    A. Divisors   大概平均下来每个数也就几千约数吧....,直接筛 B. Market 可以把时间离线下来, 考试没有想到将询问离线,用数组存算了算只能过200的点,拿了70 事实上背包后直 ...

  8. csp-s模拟测试49(9.22)养花(分块/主席树)·折射(神仙DP)·画作

    最近有点头晕........... T1 养花 考场我没想到正解,后来打的主席树,对于每个摸数查找1-(k-1),k-(2k-1)...的最大值,事实上还是很容易被卡的但是没有数据好像还比较友善, 对 ...

  9. Windows 11,一个新功能,一场新屠杀

    6月24日,微软正式公布了新一代操作系统:Windows 11.这次的更新距离上一代操作系统Windows 10的发布,隔了有6年之久. 在新一代的操作系统中,包含了这些亮点: 采用了全新的UI设计. ...

  10. windows 上 OpenSSH 服务 启用秘钥登录(微软真心逆天)

    windows 上 OpenSSH 服务 启用秘钥登录(微软真心逆天) windows 安装 OpenSSH 服务 最近需要在windows 服务器上部署自动发布程序,那么就需要用到 scp 和 ss ...