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 基于…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
渗透实战PortSwigger靶场:lab13存储型DOM XSS详解
进来是需要留言的,先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码,输入的<>当成字符串处理回显到页面中,看来只是把用户输…...
【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...
企业大模型服务合规指南:深度解析备案与登记制度
伴随AI技术的爆炸式发展,尤其是大模型(LLM)在各行各业的深度应用和整合,企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者,还是积极拥抱AI转型的传统企业,在面向公众…...
DAY 26 函数专题1
函数定义与参数知识点回顾:1. 函数的定义2. 变量作用域:局部变量和全局变量3. 函数的参数类型:位置参数、默认参数、不定参数4. 传递参数的手段:关键词参数5 题目1:计算圆的面积 任务: 编写一…...
