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
相关文章:
el-select实现懒加载
先看一个线上的演示示例:https://code.juejin.cn/pen/7273352811440504889 背景 我们在实际开发中经常遇到这样的需求: el-select实现懒加载,用通俗的话说,为了增加响应速度,就是初始下拉只展示50条数据,…...
Java泛型机制
✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏:每天一个知识点 ✨特色专栏:…...
Linux CentOS安装抓包解包工具Wireshark图形化界面
1.Wireshark介绍 Wireshark 是一个开源的网络协议分析工具,它能够捕获和分析网络数据包,提供深入的网络故障排除、网络性能优化和安全审计等功能。它支持跨多个操作系统,包括 Windows、macOS 和 Linux。 2.Wireshark主要使用方法 捕获数据…...
虹科分享 | 温度边缘效应对冻干成品含水量的影响(下)——优化和总结
上一篇文章中介绍到借助虹科Ellab的温度记录仪观察到由于冻干机壁面温度的影响,形成的边缘效应导致同一隔板的不同区域冻干饼块的干燥程度不均匀,含水量不同。 06 初次试验结果: 二次干燥中的产品温度显示: 放置在搁板中间的产品…...
ATF(TF-A)安全通告 TFV-1 (CVE-2016-10319)
安全之安全(security)博客目录导读 ATF(TF-A)安全通告汇总 目录 一、ATF(TF-A)安全通告 TFV-1 (CVE-2016-10319) 二、CVE-2016-10319 一、ATF(TF-A)安全通告 TFV-1 (CVE-2016-10319) Title 错误的固件更新SMC可能导致意外的大数据拷贝到安全内存中 CVE ID CVE-2016-10319 …...
说说我最近筛简历和面试的感受。。
大家好,我是鱼皮。 都说现在行情不好、找工作难,但招人又谈何容易?! 最近我们公司在招开发,实习社招都有。我收到的简历很多,但认真投递的、符合要求的却寥寥无几,而且都是我自己看简历、选人…...
Mysql /etc/my.cnf参数详解(一)
[mysqld] #server相关 server_id176452388 //每个MySQL服务器都需要具有唯一的server_id值 super_read_only 0 //不开启只读,在slave节点会开启即super_read_only 1 port 3306 //指定了Mysql开放的端口; default-storage-engine InnoDB skip-name…...
用最少数量的箭引爆气球【贪心算法】
用最少数量的箭引爆气球 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面上的气球记录在整数数组 points ,其中points[i] [xstart, xend] 表示水平直径在 xstart 和 xend之间的气球。你不知道气球的确切 y 坐标。 一支弓箭可以沿着 x 轴从不同点 完全垂直 地…...
Matlab论文插图绘制模板第109期—特征渲染的标签气泡散点图
在之前的文章中,分享了Matlab标签散点图的绘制模板: 特征渲染的标签散点图: 进一步,再来分享一下特征渲染的标签气泡散点图的绘制模板,从而可以再添加一个维度的信息。 先来看一下成品效果: 特别提示&…...
音视频 ffplay命令播放媒体
播放本地文件 ffplay -window_title "test time" -ss 2 -t 10 -autoexit test.mp4 ffplay buweishui.mp3播放网络流 ffplay -window_title "rtmp stream" rtmp://202.69.69.180:443/webcast/bshdlive-pc强制解码器 mpeg4解码器:ffplay -vco…...
使用Fiddler模拟网络
Fiddler已经预置提供了模拟Modem速度的选项,其位置位于: Rules->Performances->Simulate Modem Speeds 勾选该选项后,所有通过Fiddler代理的流量都会变得用56k modem上网一般。 要直观观察限速后的效果,最好使用运行在浏览…...
【Axure高保真原型】多图表动态切换
今天和大家分享多图表动态切换的原型模板,点击不同的图标可以动态切换对应的表,包括柱状图、条形图、饼图、环形图、折线图、曲线图、面积图、阶梯图、雷达图;而且图表数据可以在左侧表格中动态维护,包括增加修改和删除࿰…...
笔试题-访问控制修饰符范围
...
基于飞腾芯片的设计与调试入门指导
一、啥是自主可控 国产CPU现在厂家细算起来其实有很多,现在华为、小米也在做自己的CPU,瑞芯微、全志等的SoC现在也是广泛应用。但是真正能叫做自主可控的CPU厂商,只有6家。那啥是自主可控?首先来不严谨的讲下现在数字芯片是怎么做的设计。FPGA大家都知道,可以通过Verilog…...
了解 HarmonyOS
引言 在开始 HarmonyOS 开发之前,了解其背景、特点和架构是非常重要的。本章将为你提供一个全面的 HarmonyOS 概览。 目录 什么是 HarmonyOS HarmonyOS 的发展历程 HarmonyOS 的特点 HarmonyOS 的架构 HarmonyOS 与其他操作系统的比较 1. 什么是 HarmonyOS …...
【校招VIP】产品面试之面试官的真实意图
考点介绍: 大厂面试时,面试官提出的问题除了了解经历和想法外,最看重的是思维逻辑能力、团队协作能力和协调能力。 『产品面试之面试官的真实意图』相关题目及解析内容可点击文章末尾链接查看! 一、考点题目 1. 你遇到的最大的…...
实现远程访问Linux堡垒机:通过JumpServer系统进行安全的服务器管理
文章目录 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机,是符合 4A 规范的专业运维安全审计系统。JumpS…...
Go 1.21新增的 maps 包详解
maps 包提供了几个非常有用的用于操作 map 类型(任何类型的 map)的函数,本文接下来详细介绍下这几个函数。 maps.Clone 定义如下: func Clone[M ~map[K]V, K comparable, V any](m M) M 返回 m 的一个副本,因为新的…...
《向量数据库指南》——腾讯云向量数据库(Tencent Cloud VectorDB) SDK 正式开源
腾讯云向量数据库 SDK 宣布正式开源。根据介绍,腾讯云向量数据库(Tencent Cloud VectorDB)的 Python SDK 与 Java SDK 是基于数据库设计模型,遵循 HTTP 协议,将 API 封装成易于使用的 Python 与 Java 函数或类,为开发者提供了更加友好、更加便捷的数据库使用和管理方式。…...
Tutorial: Mathmatical Derivation of Backpropagation
目录 1. 概要 2. Gradient Descent 3. Chain rule 3.1 单变量基本链式法则 3.2 单变量全微分链式法则 3.3 小贴士:微分、导数、导函数是什么关系? 4. What and why backpropagation? 5. Backpropagation for a simple neural network 5.1 基于…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...
论文阅读:Matting by Generation
今天介绍一篇关于 matting 抠图的文章,抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法,已经有很多的工作和这个任务相关。这两年 diffusion 模型很火,大家又开始用 diffusion 模型做各种 CV 任务了&am…...
【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统
Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...
