element ui el-select组件添加选项下拉加载

需求描述:在做搜索的时候由于有一个下拉列表接口返回数据特别多所以对列表进行了一个下拉触底加载的事件,但是官方文档是没有对应的api的所以自己使用指令写了一个方法。

实现代码:

        <el-selectv-model="sellerNameSearchVal"v-select-loadmore="loadmore"remotefilterableplaceholder="请输入要搜索的供应商名称"class="w100"clearable:remote-method="selectSearch"@visible-change="selectVisibleChange"@change="onSellerNameChange"@clear="onSellerNameClear"@keyup.native.enter="onSellerNameEnter"><el-optionv-for="(item,index) in supplierList":key="index":label="item.label":value="item.value"/><!-- 分页状态 --><el-option disabled style="height: 25px;" class="flex flex-center"><div v-show="selectLoading"><i class="el-icon-loading mr10" /><span>正在加载更多...</span></div><div v-show="supplierList.length <= 0 && !selectLoading">无匹配数据</div><div v-if="supplierList.length > 0 && supplierLeave <= 0">没有更多了</div></el-option></el-select>

关键点在于v-select-loadmore="loadmore"这个自定义指令

  directives: {'select-loadmore': {bind(el, binding) {const element = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')element.addEventListener('scroll', function(e) {// this.scrollTop 存在小数,导致加减存在1的误差const condition = Math.abs(this.scrollHeight - this.scrollTop - this.clientHeight) <= 1if (condition) binding?.value()})}}},

这个指令的逻辑是监听元素的滚动事件,当滚动高度达到select的高度后调用loadmore这个方法去加载下一页的数据

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

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

相关文章

维修SedoTreepoint染色机电脑Sedomat 1800+ 5500触摸屏控制器

染厂控制器 染厂机械触摸屏控制器 Sedomat 1808 Sedomat 1808 提供 7 英​​寸用户友好型触摸屏显示屏&#xff0c;防水等级为 IP67。它保证了恶劣环境下的高质量和可靠性。RFID阅读器提供了数据采集的可能性。内部I/O可配置以满足纱线、织物和其他类型染整机的要求。 除了这些…

代码之外的功夫:程序员精进之路 -- 阅读笔记及总结

第一章 设计原型 Ross自己也不是很明确自己的需求。——好家伙&#xff0c;太真实了。客户不能明确清晰地传递自己的需求&#xff0c;客户可能只有一个大概的目标。这时候&#xff0c;该怎么办&#xff1f; 这时候可以和客户沟通&#xff0c;先出一个草图&#xff08;线框图&…

安卓UI面试题 26-30

26. Window和DecorView是什么?DecorView又是如何和Window建立联系的?Window是 WindowManager 最顶层的视图,它负责背景(窗口背景)、Title之类的标准的UI元素, Window是一个抽 象类,整个Android系统中, PhoneWindow是 Window的唯一实现类。 至于 DecorView,它是一个顶级 …

vue+elementUI实现指定列的单元格可编辑

template中的代码如下&#xff1a; <div v-if"(item.label 高压侧 || item.label 低压侧)&&coloumnHeader.label 单柱片数"><div class"editableCell"><div v-if"item.label 高压侧" dblclick"changeValue(sco…

人工智能程序使用的编程语言

用C语言可以写人工智能程序吗&#xff1f; 可以用C语言编写具有人工智能功能的程序&#xff0c;但是较为复杂。C语言是一种通用的编程语言&#xff0c;它在执行速度和资源控制方面表现出色&#xff0c;这使得它适合于需要高性能处理的人工智能应用&#xff0c;如游戏AI&#xf…

邮件安全|“AI钓鱼邮件”愈发泛滥,钓鱼邮件如何防“钓”?

毋庸置疑&#xff0c;人工智能是把双刃剑。 在AI蓬勃发展的过程中&#xff0c;潜在的风险正在悄然滋长。 近日&#xff0c;网络安全公司Enea发布的一份报告指出&#xff0c;随着以人工智能驱动的语音钓鱼&#xff08;vishing&#xff09;和短信钓鱼&#xff08;smishing&…

tomcat中把项目放在任意目录中的步骤

java web 项目由idea开发&#xff0c;路径如下图所示&#xff1a; 1.在tomcat安装目录conf\Catalina\localhost 里面&#xff0c;编写lesson1.xml文件内容如下&#xff1a; <Context path"/lesson1" docBase"C:\Users\信息技术系\Desktop\2024\学校工作\jav…

详解uniapp的生命周期

这篇文章主要介绍了 uniapp 的生命周期, 应用生命周期是指应用程序从启动到关闭的整个过程&#xff0c;包括应用程序的启动、前后台切换、退出等, 需要的朋友可以参考下 Uniapp 作为一款跨平台应用开发框架&#xff0c;具有丰富的生命周期&#xff0c;以下是 Uniapp 的生命周期…

【一】【单片机】有关LED的实验

点亮一个LED灯 根据LED模块原理图&#xff0c;我们可以知道&#xff0c;通过控制P20、P21...P27这八个位置的高低电平&#xff0c;可以实现D1~D8八个LED灯的亮灭。VCC接的是高电平&#xff0c;如果P20接的是低电平&#xff0c;那么D1就可以亮。如果P20接的是高电平&#xff0c;…

【四 (4)数据可视化之 Ploty Express常用图表及代码实现 】

目录 文章导航一、介绍二、安装Plotly Express三、导入Plotly Express四、占比类图表1、饼图2、环形图3、堆叠条形图4、百分比堆叠条形图 五、比较排序类1、条形图2、漏斗图3、面积漏斗图 六、趋势类图表1、折线图2、多图例折线图3、分列折线图4、面积图5、多图例面积图 七、频…

逻辑数据平台的 NoETL 之道(内含QA)

作者简介&#xff1a; 余俊&#xff0c;Aloudata 合伙人 & 技术副总裁。拥有 18 年互联网技术和大数据平台相关架构经验。作为主架构师及核心研发主导并完成了 Alibaba B2B 首个海量分布式 KV 存储系统&#xff0c;作为网站架构师负责 Aliexpress 全球买全球卖交易系统的第…

【云原生-kubernetes系列】--kubernetes日志收集

1、ELK架构 1.1、部署ES集群 https://mirrors.tuna.tsinghua.edu.cn/elasticstack/apt/7.x/pool/main/e/elasticsearch/ 1、下载软件包 rootes-server1:~# wget https://mirrors.tuna.tsinghua.edu.cn/elasticstack/apt/7.x/pool/main/e/elasticsearch/elasticsearch-7.12.0-…

STL库中的string

文章目录 一、STL的六大组件二、string类2.1string中的size()方法2.2隐式类型的转换2.3string的多种构造2.4string中size与length是否有差异&#xff1f;2.4string中的capacity2.5string中的push_back和append2.6string中运算符重载operator2.7string中的reserve扩容2.8string中…

数据结构——字符串

1.leetcode 151 题目链接&#xff1a; . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/reverse-words-in-a-string/…

C++:基类中的函数什么情况下声明为虚函数

在C中&#xff0c;基类中的函数应该在以下情况下声明为虚函数&#xff1a; 实现多态行为&#xff1a;如果你希望通过基类指针或引用来调用派生类中的重写函数&#xff0c;那么基类中的这个函数应该被声明为虚函数。这是实现运行时多态性的一种方式。 允许派生类重写&#xff1…

体验OceanBase OBD V2.5.0 组件内扩容和组件变更

背景 OBD 是OceanBase的命令行部署工具&#xff0c;在 obd V2.5.0 版本之前&#xff0c;其主要功能主要是部署各类组件&#xff0c;例如 oceanbase-ce,obproxy-ce,obagent 等。然而&#xff0c;它并不支持组件的变更操作以及组件内部的扩缩容调整。具体来说&#xff1a; 1、若…

C语言经典面试题目(八)

1、什么是文件指针&#xff1f;请解释文件指针的作用。 文件指针是在C语言中用来指向文件的指针变量。它主要用于对文件进行读写操作&#xff0c;通过文件指针可以控制文件的读写位置、读取文件内容、向文件中写入数据等操作。 文件指针的作用&#xff1a; 打开文件&#xff…

网络层_IP

传输层解决的是传输控制&#xff0c;而实际真正决定数据能否发送到对端的是网络层。网络层是有概率传输&#xff0c;而传输层是可靠性传输。所以传输层网络层就可以做到将数据可靠发送到对端。网络层的常见协议有&#xff1a;IP、ICMP等&#xff0c;其中最重要的是IP协议&#…

Flutter 的 switch 语句补遗

我的 App 里&#xff0c;一个消息气泡变成空白了&#xff0c;非常奇怪&#xff0c;此前一直是没问题的&#xff0c;经过调试定位我发现&#xff1a; static TextSpan _buildRootSpan(BuildContext ctx, List<LinkifyElement> parts, TextStyle? style) {List<InlineS…

STM32F103 CubeMX 使用USB生成鼠标设备

STM32F103 CubeMX 使用USB生成鼠标设备 1 配置cubeMX1.1配置外部晶振&#xff0c;配置debug口1.2 配置USB1.3 配置芯片的时钟1.4 生成工程 2. 编写代码2.1 添加申明2.2 main函数代码 1 配置cubeMX 1.1配置外部晶振&#xff0c;配置debug口 1.2 配置USB 1.3 配置芯片的时钟 需…