Element-Plus: Select组件实现滚动分页加载

Element-Plus的select组件并没有自带滚动分页加载的功能,其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页下一页操作按钮的方式进行分页加载切换:
在这里插入图片描述
但如果不想通过点击分页按钮的方式,利用滚动触底进行下一页加载的话,可以利用Vue自定义指令实现:

自定义指定的实现方式,在网络上已经有实现的代码了,只不过需要在<el-select>上添加指定的popper-class(比如:popper-class=“single-select-loadmore”),这样做主要是因为<el-select>默认是将下拉列表插入至 body 元素(teleported=true),为了获取下拉列表的实际Dom对象而额外添加了popper-class

 const selectDom = document.querySelector('.single-select-loadmore .el-select-dropdown__wrap')

这样做略显麻烦,不够灵活。那么有没有办法,不设置额外的popper-class来获取到对应的下拉列表的Dom元素呢?Element-Plus文档并没有相关获取下拉列表Dom的相关属性,并且在<el-select>渲染的Dom和下拉列表的Dom元素在审查代码时也没有发现明显的关联性。但通过对mounted周期调试,发现了埋藏深处的popperRef.contentRef正是我们要找的下拉列表的Dom,于是代码可以这样实现:

// src/directive/elSelectLoadMore.jsexport default {mounted(el, binding, vnode) {const selectDom = vnode.children[0].component.refs.popperRef.contentRef.querySelector('.el-select-dropdown .el-select-dropdown__wrap');function loadMores() {// 判断是否到底const isBottom = this.scrollHeight - this.scrollTop <= this.clientHeight;if (isBottom) {// 执行事件回调binding.value && binding.value();}}// 将获取到的dom和函数挂载到el-select上,以便实例销毁时进行事件移除处理el._selectDom = selectDom;el._selectLoadMore = loadMores;// 监听滚动事件selectDom?.addEventListener('scroll', loadMores.bind(selectDom));},// 实例销毁beforeUnmount(el) {if (el._selectLoadMore) {el._selectDom.removeEventListener('scroll', el._selectLoadMore);delete el._selectDom;delete el._selectLoadMore;}}
}
// src/directive/index.jsimport elSelectLoadMore from './common/elSelectLoadMore'export default function directive(app){app.directive('selectLoadmore', elSelectLoadMore)
}
// src/main.jsimport App from './App'
import directive from './directive'const app = createApp(App)
directive(app)

经过简单测试,上述代码可以正常实现分页。需要注意的是上述selectDom的获取方式没有经过充分测试,只作为实验性代码。

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

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

相关文章

3.4 XPath、Beautiful Soup 与 Pyquery的基本使用总结和比较

目录 一、三者共同点 二. 三者差异与基本使用 (一). 使用示例&#xff1a; (二). XPath (三). Beautiful Soup (四). pyquery (五). 三者差异 三.练习实战 一、三者共同点 导入&#xff0c;获得网页文本&#xff0c;str 和 bytes 类型均可作为参数传入。 import reque…

http postman

地址 &#xff1a; https://oaqas.lingyiitech.com:9800/auth-api/openapi/dingtalk-oa/topapi/message/corpconversation/asyncsend_v2?token40216bf0ceea8e56b778d537b20f5d23 https://oaqas.lingyiitech.com:9800/auth-api/openapi/dingtalk-oa/topapi/message/corpconve…

2024年太原等保测评中心名单看这里!

开年来&#xff0c;不少太原小伙伴打算做等保了。大家都在问&#xff0c;目前太原等保测评中心有哪些&#xff1f;在哪里丫&#xff1f;这不我们小编就给大家整理一下&#xff0c;仅供参考哈&#xff01; 2024年太原等保测评中心名单看这里&#xff01; 序号&#xff1a;1 …

Python入门:从基础到实践

&#x1f40d; Python入门&#xff1a;从基础到实践 &#x1f680; &#x1f31f; 引言 Python&#xff0c;作为一种高级编程语言&#xff0c;以其简洁明了的语法和强大的功能而广受欢迎。无论你是编程新手还是希望学习新语言的开发者&#xff0c;Python都是一个极佳的选择。…

接水问题(C++)

题意 学校里有一个水房&#xff0c;水房里一共装有 m个龙头可供同学们打开水&#xff0c;每个龙头每秒钟的供水量相等&#xff0c;均为 1。   现在有 n名同学准备接水&#xff0c;他们的初始接水顺序已经确定。 将这些同学按接水顺序从 1到 n编号&#xff0c;i号同学…

[C++]20.实现红黑树。

实现红黑树 一.基本概念&#xff1a;1.红黑树的概念&#xff1a;2.红黑树的性质&#xff1a; 二.实现红黑树&#xff1a;1.基本结构&#xff1a;2.插入节点的多种情况&#xff1a;1.叔叔存在且为红&#xff1a;2.叔叔不存在/存在且为黑(单旋变色)3.叔叔不存在/存在且为黑(多旋&…

C/C++中{}的用法总结(全)

C基础专栏&#xff1a;http://t.csdnimg.cn/UjhPR 目录 1.定义初始化列表&#xff08;Initializer List&#xff09; 2.类成员初始化列表 3.无默认构造函数的类的默认初始化&#xff08;C11 及以后版本&#xff09; 4.初始化器列表构造函数&#xff08;C11 及以后版本&…

计算机网络——分组延时、丢失和吞吐量

分组延迟是指从发送方发送数据包到接收方接收到数据包所经历的时间。 分组时延的四种类型&#xff1a; 传输时延、传播时延、排队时延、节点处理时延。 传输时延&#xff1a;传输时延是指分组从发送方到接收方所需的时间&#xff0c;取决于分组的长度和链路的传输速率。传输时…

centos配置nginx自动启动

查看是否存在相应的服务&#xff0c;如下&#xff0c;有nginx.service [rootnode142 ~]# systemctl list-unit-files |grep nginx nginx.service disabled 第一步&#xff1a;进入到/lib/systemd/system/目录 cd /lib/systemd/system 第二步&#xff1a;创建nginx.service文…

Docker学习之镜像管理(超详解析)

Docker镜像生命周期&#xff08;可以把docker镜像理解为虚拟机镜像&#xff09; 实验内容&#xff1a; 搜索官方仓库镜像 [rootlocalhost ~]# docker search busybox //以查找busybox为例 搜索说明&#xff1a;name镜像名称 description镜像说明 stars点赞数量 official…

四川宏博蓬达法律咨询有限公司:法律服务的行业翘楚

在当今社会&#xff0c;法律服务已经成为人们生活中不可或缺的一部分。随着法律意识的提高&#xff0c;选择一家专业、可靠的法律咨询公司显得尤为重要。四川宏博蓬达法律咨询有限公司&#xff0c;作为业内的佼佼者&#xff0c;以其卓越的服务质量和广泛的业务范围&#xff0c;…

Nacos 集群搭建

1 . 集群结构图 : 其中包括3个nacos结点&#xff0c;然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx ; 我们计划的集群结构 : 三个nacos结点的地址 : 节点ipportnacos1192.168.150.18845nacos2192.168.150.18846nacos3192.168.150.18847 2 . 搭建集群 搭…

Unity_PUN2多人联机API汇总

PUN2多人联机API汇总 代码仅为函数区别和属性展示&#xff0c;并不针对指定功能 按照需要调用即可 服务器相关API和回调 #region 服务器相关public void 连接服务器(){PhotonNetwork.ConnectUsingSettings();PhotonNetwork.GameVersion "1";}public void 离开服务…

2024最新轻量应用服务器简介_轻量应用服务器购买指南

腾讯云轻量应用服务器开箱即用、运维简单的轻量级云服务器&#xff0c;CPU内存带宽配置高并且价格特别便宜&#xff0c;大带宽&#xff0c;但是限制月流量&#xff0c;轻量2核2G3M带宽61元一年、2核2G4M优惠价99元一年&#xff0c;540元三年、2核4G5M带宽165元一年&#xff0c;…

JAVA初阶数据结构(链表)练习(这些可以作为java包中的方法)

这里的每一个题大家都要仔细完成&#xff0c;这些题目每个我都至少思考了两个小时左右&#xff08;沉重心&#xff0c;慢慢来&#xff09; 1.反向链表的实现&#xff08;对链表进行翻转&#xff09;&#xff08;力扣有&#xff09; &#xff08;1&#xff09;图示 &#xff0…

扭矩VS转角法的优缺点——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 在机械工程中&#xff0c;螺栓拧紧是一个至关重要的步骤&#xff0c;它直接关系到设备的安全性和性能。在众多螺栓拧紧方法中&#xff0c;扭矩法和转角法是最常用的两种。本文将对这两种方法进行详细的对比&#xff0c;…

C语言(指针)单元练习三

1下列语句的输出结果是______。C int **pp,*p,a5,b8; pp&p;p&a;p&b;printf("%d,%d",*p,**pp); A. 5,8 B.8,5 C. 8,8 D. 5,5 2如下程序的输出结果是______。B #include <stdio.h> #include <ctype.h> #include <stri…

2024考研国家线公布,各科分数线有哪些变化?考研国家线哪些涨了,哪些跌了?可视化分析告诉你

结论在文章结尾 2024考研国家线 一、近五年国家线趋势图-学术硕士 文学 管理学 工学照顾专业 体育学 交叉学科 军事学 历史学 理学 享受少数名族照顾政策的考生 中医类照顾专业 教育类 艺术类 医学 工学 哲学 法学 农学 经济学 二、近五年国家线趋势图-专业硕士 中医 应用心理 …

web项目的搭建

使用Webstorm并创建Next.js文件 1、配置nodejs环境、安装webstorm【配置node.js可以使用nvm去管理nodejs的版本】 2、需要破解webstorm&#xff0c;可能会导致原本的idea失效&#xff0c;注册码过期 3、taobao的npm过期&#xff0c;导致npm is sass执行不成功&#xff0c;需…

jvaweb 3-13

Element 后端开发 maven maven的作用 下载并配置环境变量 创建Maven项目 Maven坐标 依赖 Maven的依赖传递特性 以图表形式展示依赖 排除依赖 依赖范围 生命周期