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,一经查实,立即删除!

相关文章

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

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

[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 及以后版本&…

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 . 搭建集群 搭…

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…

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的依赖传递特性 以图表形式展示依赖 排除依赖 依赖范围 生命周期

普通小白现在做抖音小店还能赚到钱吗?千万不要忽视这几点

大家好&#xff0c;我是电商花花。 赚钱做生意的秘密&#xff0c; 很简单&#xff0c;就是积少成多&#xff0c;以小见大&#xff0c;然后和时间成为朋友。 而做抖音小店也是这样的一个道理&#xff0c;不管是新手小白还是老电商玩家&#xff0c;都是从一点一滴做起来的&…

如何使用vue定义组件之——父组件调用子组件

首先&#xff0c;我们需要创建两个组件模板template&#xff1a; <template id"father"><div><h3>我是父组件</h3><h3>访问自己的数据:</h3><h3>{{ msg }}</h3></div></template><template id"…

性能测试-数据库

一、数据库事务机制 ACID描述 1、原子性Atomicity&#xff1a;事务通常由多个语句组成。原子性保证将每个事务视为一个“单元”&#xff0c;该事务要么完全成功&#xff0c;要么完全失败 2、一致性Consistency&#xff1a;“一致”是指数据库中的数据是正确的&#xff0c;不存…

【2024-03-12】设计模式之模板模式的理解

实际应用场景&#xff1a;制作月饼 过程描述&#xff1a; 一开始&#xff0c;由人工制作月饼&#xff0c; 第一个&#xff1a;根据脑子里面月饼的形状&#xff0c;先涅出月饼的形状&#xff0c;然后放入面粉和馅料把开口合并起来。 第二个&#xff1a;根据脑子里面月饼的形状&…

BigDL-LLM 安装指南——在iGPU集成显卡下使用BigDL-LLM大模型库加速LLM

文章目录 iGPU是什么&#xff1f;一、环境准备1.1 Visual Studio 2022 Community 安装1.2 安装或更新最新版本的GPU驱动程序1.3 安装英特尔oneAPI工具包2024.0版本1.4 安装Anaconda 二、BigDL -LLM 安装2.1 创建虚拟环境2.2 激活虚拟环境2.3 安装bigdl-llm[xpu] 三、运行环境配…

iOS 17.4 Not Installed

iOS15以后&#xff0c;下载了xcode安装好后&#xff0c;并不会自动下载好模拟器&#xff0c;需要手动下载。 有两种下载方式 xcode下载 xcode -> Settings 打开面板 xcode下载虽然方便&#xff0c;但是有个问题是&#xff0c;这里下载如果断网了不会断点续传&#xff0c;…

MyBatis 框架之一:简介及环境搭建详细步骤

1. MyBatis 是什么&#xff1f; MyBatis 是一个流行的、轻量级的 Java 持久层框架&#xff0c;它简化了与数据库交互和 SQL 映射的过程。MyBatis 取代了 JDBC 原始 API 的大量繁琐工作&#xff0c;允许开发者将更多的精力放在业务逻辑上而不是处理数据访问细节。 mybatis 是一款…

激光雷达研究笔记1:资料整理与学习_windows机对其评估使用

到手了一款型号为LDROBOT LiDAR LD19 的单线激光雷达模块&#xff0c;现对其进行学习使用&#xff1a; 1.对产品手册的研究&#xff1a; 通读产品手册后&#xff0c;我提炼了几方面有用的信息&#xff1a; 1.测量依据&#xff1a; 以下是激光雷达点云扫描示意图&#xff1a; 上…

Linux信号机制(二)

目录 一、信号的阻塞 二、信号集操作函数 三、sigprocmask函数 四、pause函数 五、sigsuspend函数 一、信号的阻塞 有时候不希望在接到信号时就立即停止当前执行&#xff0c;去处理信号&#xff0c;同时也不希望忽略该信号&#xff0c;而是延时一段时间去调用信号处理函数。…