el-select下拉框处理分页数据,触底加载更多

1、声明自定义指令:

directives: {'loadmore': {inserted(el, binding) {const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');SELECTWRAP_DOM.addEventListener('scroll', function() {const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;if (condition) {binding.value();}});}}
},

2、使用自定义指令v-loadmore:

<el-select filterable v-model="form.standardDevice" placeholder="请选择" clearable v-loadmore="loadMore" @change="handleChange"><el-option v-for="item in deviceList" :key="item.deviceId" :label="item.deviceName" :value="item.serialNumber"></el-option><el-option v-if="selectLoading" v-loading="selectLoading" value=""></el-option>
</el-select>

3、发送请求加载数据

//滚动条滚动到底部
loadMore(){//页数加一this.pageNum ++ //发送网络请求this.getDeviceList()
},

参考:el-select滚动到底部加载更多(分页加载数据)_el-select 触底加载分页_天道酬勤_鹿的博客-CSDN博客

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue--声明式导航

一、声明式导航-导航链接 1.需求 实现导航高亮效果 如果使用a标签进行跳转的话&#xff0c;需要给当前跳转的导航加样式&#xff0c;同时要移除上一个a标签的样式&#xff0c;太麻烦&#xff01;&#xff01;&#xff01; 2.解决方案 vue-router 提供了一个全局组件 router…

FPGA_学习_13_方差计算小模块

测距器件APD的性能与器件本身的温度、施加在APD的偏置电压息息相关。 在不同的温度下&#xff0c;APD的偏压对测距性能的影响非常大。 要确定一个合适的APD的偏压Vopt&#xff0c;首先你要知道当前温度下&#xff0c;APD的击穿电压Vbr&#xff0c;一般来讲&#xff0c;Vopt Vb…

【性能优化】MySQL百万数据深度分页优化思路分析

业务场景 一般在项目开发中会有很多的统计数据需要进行上报分析&#xff0c;一般在分析过后会在后台展示出来给运营和产品进行分页查看&#xff0c;最常见的一种就是根据日期进行筛选。这种统计数据随着时间的推移数据量会慢慢的变大&#xff0c;达到百万、千万条数据只是时间问…

FPGA学习——实现任意倍分频器(奇数/偶数倍分频器均可实现)

文章目录 一、分频器二、Verilog实现任意倍分频器2.1、Verilog源码2.2、仿真文件 三、仿真波形图 一、分频器 在FPGA&#xff08;可编程逻辑门阵列&#xff09;中&#xff0c;分频器是一种用于将时钟信号的频率降低的电路或模块。它可以根据输入的时钟信号生成一个较低频率的输…

python+unittest+requests+HTMLRunner搭建接口测试框架,执行用例请求多个不同请求方式的接口

问题描述&#xff1a; 搭建接口测试框架&#xff0c;执行用例请求多个不同请求方式的接口 实现步骤&#xff1a; ① 创建配置文件config.ini&#xff0c;写入部分公用参数&#xff0c;如接口的基本url、测试报告文件路径、测试数据文件路径等配置项 1 [DATABASE] 2 data_add…

Llama2开源大模型的新篇章以及在阿里云的实践

Llama一直被誉为AI社区中最强大的开源大模型。然而&#xff0c;由于开源协议的限制&#xff0c;它一直不能被免费用于商业用途。然而&#xff0c;这一切在7月19日发生了改变&#xff0c;当Meta终于发布了大家期待已久的免费商用版本Llama2。Llama2是一个由Meta AI开发的预训练大…

Redis的9种数据类型与数据持久化

系列文章传送门&#xff1a; 【七天入门数据库】第一天 MySQL的安装部署 【七天入门数据库】第二天 数据库理论基础 【七天入门数据库】第三天 MySQL的库表操作 【七天入门数据库】第四天 数据操作语言DML 一、Redis的9种数据类型的基本操作 &#xff08;一&#xff09;k…

Apache Flink DataStream transformation

Operators transform one or more DataStreams into a new DataStream. Operators操作转换一个或多个DataStream到一个新的DataStream 。 filter function Scala object DataStreamTransformationApp {def main(args: Array[String]): Unit {val env StreamExecutionEnvi…

用OpenCV图像处理技巧之白平衡算法(一)

1. 引言 欢迎继续来到我们的图像处理系列&#xff0c;在这里我们将探讨白平衡的关键技术。如果大家曾经拍过一张看起来暗淡、褪色或颜色不自然的照片&#xff0c;那么此时大家就需要了解到白平衡技术的重要性。在本文中&#xff0c;我们将深入探讨白平衡的概念&#xff0c;并探…

idea+springboot+jpa+maven+jquery+mysql进销存管理系统源码

ideaspringbootjpamavenjquerymysql进销存管理系统 一、系统介绍1.环境配置 二、系统展示1. 管理员登录2.首页3.采购订单4.收货入库5. 采购退货6. 商品入库7. 商品出库8. 库存查询9.商品移库10.库存盘点11.销售订单12.发货出库13.销售退货14.商品查询15. 供应商查询16.客户查询…

微信小程序将接口返回的文件流预览导出Excel文件并转发

把接口url替换就可以用了 exportExcel () {wx.request({url: importMyApply, //这个地方是你获取二进制流的接口地址method: POST,responseType: "arraybuffer", //特别注意的是此处是请求文件流必须加上的属性&#xff0c;不然你导出到手机上的时候打不开&#xff…

8.4Java EE——基于注解的AOP实现

Spring AOP的注解 元素 描述 @Aspect 配置切面 @Pointcut 配置切点 @Before 配置前置通知 @After 配置后置通知 @Around 配置环绕方式 @AfterReturning 配置返回通知 @AfterThrowing 配置异常通知 下面通过一个案例演示基于注解的AOP的实现,案例具体实现步骤如下。 1、创建A…

Jetson Orin Nano 平台适配IMX585 camera驱动调试记录

1. 前言 Jetson Orin Nano Devkit适配imx585 camera 使用argus_camera捕获流,图片是黑色的 用示波器来测量mipi信号,信号正常 Jetpack版本: sensor参数: dts配置: mode0 { /* */ mclk_khz = “24000”; num_lanes = “4”; tegra_sinterface = “serial_c”; ph…

“VCMessage”任务意外失败

从网上查到很多都是说设置这个位置&#xff0c;但是我的已经是对的&#xff0c;还是出现 “VCMessage”任务意外失败这个错误。 又查到一个人说解决方法是更正OutputPath或从父级继承&#xff1a;右键单击项目,然后转到"属性">"链接器">"常规&q…

mac brew安装 node 踩坑日记- n切换node不生效

最近用了一个旧电脑开发&#xff0c;发现里面node管理混乱&#xff0c;有nvm、n和homebrew&#xff0c;导致切换node 切换不了&#xff0c;开发也有莫名其妙的错误。所以我打算重新装一下node&#xff0c;使用n做为管理工具。 1. 删除nvm cd ~ rm -rf .nvm2. 删除n sudo rm -…

GAMS---典型优化模型和算法介绍、GAMS安装和介绍、GAMS程序编写、GAMS程序调试、实际应用算例演示与经验分享

优化分析是很多领域中都要面临的一个重要问题&#xff0c;求解优化问题的一般做法是&#xff1a;建立模型、编写算法、求解计算。常见的问题类型有线性规划、非线性规划、混合整数规划、混合整数非线性规划、二次规划等&#xff0c;优化算法包括人工智能算法和内点法等数学类优…

什么是RESTful API

什么是RESTful API RESTful API是利用HTTP请求访问或使用数据的应用程序接口&#xff08;API&#xff09;的体系结构样式。这些数据可用于GET&#xff0c;PUT&#xff0c;POST和DELETE数据类型&#xff0c;这些数据类型指的是与资源相关的操作读取、更新、创建和删除。 网站的…

Vue移动端项目--瑞幸咖啡重构优化

来了客官&#xff0c;好久不见&#xff01; 从年初开始&#xff0c;就有个想法&#xff0c;想着把之前做过的项目重新整理一下。毕竟今时不同往日&#xff0c;从现在的角度去看曾经做过的项目&#xff0c;倒是觉得有很多稚嫩的地方。毕竟无论做什么都是熟能生巧&#xff0c;由浅…

字符串 (2)--- 前缀函数与 KMP 算法

/* https://www.luogu.com.cn/problem/UVA455 最小周期&#xff1a; n - pi[n -1] */ #include <iostream> #include <string> #include <vector> using namespace std; vector<int> prefix_fun(string s) { int len s.length(); /…

基于java在线点餐系统设计与实现

基于java在线点餐系统设计与实现 随着科学技术与经济的快速发展&#xff0c;网络信息技术也有了显著的提升与进步&#xff0c;当今的社会是一个集数字化&#xff0c;网络化&#xff0c;信息化的&#xff0c;并且是以网络为核心的现代化社会。伴随信息互联网的高速成长&#xf…