el-select实现懒加载

先看一个线上的演示示例:https://code.juejin.cn/pen/7273352811440504889

背景

我们在实际开发中经常遇到这样的需求:

el-select实现懒加载,用通俗的话说,为了增加响应速度,就是初始下拉只展示50条数据,滚动条下拉到底部后,再次调用接口增量加载接下来的50条数据,重复该情况,直到数据加载完成。

实现思路 

首先需要后端提供接口支持分页查询

前端调用接口需要传参当前页(currentPage)每页展示条数(pageNumber),每次滚动条滚动到底部后 currentPage++ 

比如:初次调用接口currentPage:1,pageNumber:50;那么第二次调用时候currentPage:2,pageNumber:50;以此类推。

那么我们如何知道滚动条滚动到底部了呢?

 

 参考链接:https://blog.csdn.net/weixin_43340372/article/details/132210911?spm=1001.2014.3001.5502

以上我们理解了如何判断滚动条滚动到底部了,

那么当滚动条滚动到底部后,如何触发加载方法呢?

vue给我们提供了自定义指令,

新建自定义指令el-select-lazyloading帮定到el-select元素上,在元素第一次帮定的时候会调用

bind方法,

通过这两个类(.el-select-dropdown .el-select-dropdown__wrap)我们可以拿到滚动的盒子,

对该盒子添加scroll滚动事件,滚动到底部时触发方法。

具体实现

Api

为了更接近真实,我们先模仿一个接口调用。

// 伪造接口调用
class Api {
  #baseData = [{
    value: '选项1',
    label: '黄金糕'
  }, {
    value: '选项2',
    label: '双皮奶'
  }, {
    value: '选项3',
    label: '蚵仔煎'
  }, {
    value: '选项4',
    label: '龙须面'
  }, {
    value: '选项5',
    label: '北京烤鸭'
  }, {
    value: '选项7',
    label: '北京烤鸭1'
  }, {
    value: '选项8',
    label: '北京烤鸭2'
  }, {
    value: '选项9',
    label: '北京烤鸭3'
  }, {
    value: '选项10',
    label: '北京烤鸭4'
  }]
  getData(currentPage = 1, pageNumber = 10) {
    return new Promise(resolve => {
      setTimeout(() => {
        let data = [];
        if (currentPage > 1) {
          data = this.#baseData.map(item => ({ value: item.value + `currentPage-${currentPage}`, label: item.label + `currentPage-${currentPage}` }))
        } else {
          data = this.#baseData;
        }
        resolve(data);
      }, 1000
      )
    })
  }
}
const api = new Api();

 以上代码中,首先新建了一个Api类,在该类中提供了每次调用接口的基础数据baseData,

看到这里大家可能会有疑问为什么baseData前要加一个#号(#baseData代表为私有属性,只能在本类中访问

getData方法接受两个传参,第一个当前页(currentPage),第二个每页的条数(pageNumber)

调用接口1秒后返回数据

 代码结构

<div id="app">
  选择活动:
  <el-select v-model="value" style="width: 300px" v-el-select-lazyloading="lazyloading">
    <el-option :label="item.label" :value="item.value" v-for="item in list" :key="item.value"></el-option>
  </el-select>
</div>

<script>
// 伪造接口调用
class Api {
  #baseData = [{
    value: '选项1',
    label: '黄金糕'
  }, {
    value: '选项2',
    label: '双皮奶'
  }, {
    value: '选项3',
    label: '蚵仔煎'
  }, {
    value: '选项4',
    label: '龙须面'
  }, {
    value: '选项5',
    label: '北京烤鸭'
  }, {
    value: '选项7',
    label: '北京烤鸭1'
  }, {
    value: '选项8',
    label: '北京烤鸭2'
  }, {
    value: '选项9',
    label: '北京烤鸭3'
  }, {
    value: '选项10',
    label: '北京烤鸭4'
  }]
  getData(currentPage = 1, pageNumber = 10) {
    return new Promise(resolve => {
      setTimeout(() => {
        let data = [];
        if (currentPage > 1) {
          data = this.#baseData.map(item => ({ value: item.value + `currentPage-${currentPage}`, label: item.label + `currentPage-${currentPage}` }))
        } else {
          data = this.#baseData;
        }
        resolve(data);
      }, 1000
      )
    })
  }
}
const api = new Api();
// 全局注册组件
new Vue({
  el: '#app',
  directives: {
    "el-select-lazyloading": {
      bind(el, binding) {
        let SELECT_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECT_DOM.addEventListener("scroll", function () {
          let condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },
  data() {
    return {
      currentPage: 1,
      pageNumber: 10,
      value: "",
      list: [],
    };
  },
  methods: {
    async lazyloading() {
      this.loading = true;
      const data = await api.getData(this.currentPage);
      this.loading = false;
      this.list.push(...data);
      this.currentPage++;
    }
  },
  mounted() {
    this.lazyloading();
  }
})

</script>

参考链接:

 https://blog.csdn.net/weixin_43340372/article/details/132210911?spm=1001.2014.3001.5502

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/98410.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

excel 分组排序

excel中会遇到对不同分组数据进行排序&#xff0c;比如对于不同班级里的学生按照分数高低进行升序排序&#xff0c;可以采用如下公式 SUMPRODUCT((A$2:A$12A2)*(C$2:C$12>C2))1 如果需要 进行降序排序&#xff0c;将公式中的大于号替换为小于号即可

Unity UI与粒子 层级问题Camera depth Sorting Layer Order in Layer RenderQueue

Unity游戏开发中&#xff0c;模型、界面、特效等&#xff0c;需要规划好layer的概念&#xff0c;涉及到摄像机&#xff08;Camera&#xff09;、画布&#xff08;Canvas&#xff09;、Shader等相关内容。 在 Unity 中&#xff0c;渲染顺序是由多个因素共同决定的&#xff0c;大…

【暴力DP】2021 icpc上海 I

Problem - I - Codeforces 题意&#xff1a; 思路&#xff1a; 考虑暴力DP即可 设 dp[i][j][k]表示 前 i 个物品&#xff0c;已经翻倍了 j 次&#xff0c;A点数 - B点数为 k 的最大价值和 然后分为这6种决策分类讨论就好了 注意数组里不能有负数&#xff0c;要加个偏移量 P…

百度文心一率先言向全社会开放 应用商店搜“文心一言”可直接下载

8月31日&#xff0c;文心一言率先向全社会全面开放。广大用户可以在应用商店下载“文心一言APP”或登陆“文心一言官网”&#xff08;https://yiyan.baidu.com&#xff09; 体验。同时&#xff0c;企业用户可以直接登录百度智能云千帆大模型平台官网&#xff0c;调用文心一言能…

Kubernetes技术--k8s核心技术 configMap

1.概述 configMap最主要的作用是存储一些不加密的数据到/etcd,让pod以变量或者数据卷(volume)挂载到容器。 应用场景:配置文件、存储信息等 2.使用 -1.创建配置文件。 这里我们需要先编写一个配置文件。使用redis,如下所示:

k8s使用ECK(2.4)形式部署elasticsearch+kibana-http协议

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、准备elasticsearch-cluster.yaml二、部署并测试总结 前言 之前写了eck2.4部署eskibana&#xff0c;默认的话是https协议的&#xff0c;这里写一个使用http…

SpringCloud(十)——ElasticSearch简单了解(三)数据聚合和自动补全

文章目录 1. 数据聚合1.1 聚合介绍1.2 Bucket 聚合1.3 Metrics 聚合1.4 使用 RestClient 进行聚合 2. 自动补全2.1 安装补全包2.2 自定义分词器2.3 自动补全查询2.4 拼音自动补全查询2.5 RestClient 实现自动补全2.5.1 建立索引2.5.2 修改数据定义2.5.3 补全查询2.5.4 解析结果…

面试官如何考察与CAP相关的理论?

在互联网技术面试中&#xff0c;考察分布式技术已经是面试的标配了。很多招聘信息中&#xff0c;你能发现&#xff0c;一线互联网公司在对候选人的要求中都有“分布式系统设计”这一关键词。无论你是程序员&#xff0c;还是架构师&#xff0c;都要掌握分布式系统设计。 案例背…

vue使用打印组件print-js

项目场景&#xff1a; 由于甲方要求&#xff0c;项目需要打印二维码标签&#xff0c;故开发此功能 开发流程 安装包&#xff1a;npm install print-js --saveprint-js的使用 <template><div id"print" ref"print" ><p>打印内容<p&…

WebSocket 协议及其使用案例

文章目录 前言一、初识 WebSocket 协议1.1 什么是 WebSocket 协议1.2 WebSocket 与 HTTP 的关系1.3 WebSocket 握手的过程1.4 WebSocket 解决了什么问题 二、WebSocket 数据帧格式2.1 WebSocket 数据帧格式图示2.2 各字段的详细说明 三、SpringBoot 项目中引入 WebSocket3.1 创…

python中的文件操作

我们平常对文件的基本操作&#xff0c;大概可以分为三个步骤&#xff08;简称文件操作三步走&#xff09;&#xff1a; ① 打开文件 ② 读写文件 ③ 关闭文件 【注意事项】 注意&#xff1a;可以只打开和关闭文件&#xff0c;不进行任何读写 文件打开 open函数&#xff…

Hibernate(Spring Data)抓取策略

文章目录 示例代码放到最后&#xff0c;使用的是Springboot 项目1. 简介2. Hibernate抓取策略分类2.1 即时加载&#xff08;Eager Loading&#xff09;2.2 延迟加载&#xff08;Lazy Loading&#xff09;2.3 子查询加载&#xff08;Subselect Loading&#xff09;2.4 基于批处理…

排序之选择排序

文章目录 前言一、直接选择排序1、直接选择排序基本思想2、直接选择排序代码实现3、直接选择排序的效率 二、堆排序1、堆排序2、堆排序的效率 前言 选择排序的基本思想就是每一次从待排序的数据元素中选出最小(或最大)的一个元素&#xff0c;存放在序列的起始位置&#xff0c;…

pdfh5在线预览pdf文件

前言 pc浏览器和ios的浏览器都可以直接在线显示pdf文件&#xff0c;但是android浏览器不能在线预览pdf文件&#xff0c;如何预览pdf文件&#xff1f; Github: https://github.com/gjTool/pdfh5 Gitee: https://gitee.com/gjTool/pdfh5 使用pdfh5预览pdf 编写预览页面 <…

PSP - 蛋白质结构预测 OpenFold Multimer 模型训练参数与配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132575709 OpenFold Multimer 是用于预测蛋白质多聚体结构的计算方法。基于OpenFold 的单体预测框架&#xff0c;利用深度学习技术&#xff0c;结…

Python Flask Web开发二:数据库创建和使用

前言 数据库在 Web 开发中起着至关重要的作用。它不仅提供了数据的持久化存储和管理功能&#xff0c;还支持数据的关联和连接&#xff0c;保证数据的一致性和安全性。通过合理地设计和使用数据库&#xff0c;开发人员可以构建强大、可靠的 Web 应用程序&#xff0c;满足用户的…

Mysql数据库(1)—索引

索引是什么&#xff1f; 索引是帮助MySQL高效获取数据的排好序的数据结构。常见的索引数据结构包括&#xff1a; 二叉树红黑树Hash表B-Tree mysql索引分类 按逻辑结构分类&#xff1a;B tree索引、Hash索引、Full-text索引。按物理存储分类&#xff1a; &#xff08;1&…

Linux命令awk详细用法

简介 awk 是一种强大的文本处理工具&#xff0c;用于在命令行环境下对文件或数据流进行逐行处理和分析。它是由 Alfred Aho、Peter Weinberger 和 Brian Kernighan 在 1977 年开发的&#xff0c;并以他们三人的姓氏命名。awk 在 Unix/Linux 系统中非常常见&#xff0c;也有 Win…

【Git】在idea中多分支开发如何——合并分支、处理冲突

博主简介&#xff1a;22级计算机科学与技术本科生一枚&#x1f338;博主主页&#xff1a;是瑶瑶子啦每日一言&#x1f33c;: “人间总有一两风&#xff0c;填我十万八千梦” 目录 一、背景二、具体操作 一、背景 我当前开发的分支——hfy我想将subject分支的最新代码拉取&…

银河麒麟V10(Tercel)服务器版安装 Docker

一、服务器环境 ## 查看系统版本&#xff0c;确认版本 cat /etc/kylin-release Kylin Linux Advanced Server release V10 (Tercel)## 操作系统 uname -p aarch64## 内核版本&#xff08;≥ 3.10&#xff09; uname -r 4.19.90-21.2.ky10.aarch64## iptables 版本&#xff08;…