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

news2025/4/30 0:27:06

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.js

export 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.js

import elSelectLoadMore from './common/elSelectLoadMore'

export default function directive(app){
  app.directive('selectLoadmore', elSelectLoadMore)
}
// src/main.js

import App from './App'
import directive from './directive'

const app = createApp(App)
directive(app)

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

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

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

相关文章

Arrays对象数组排序 --java学习笔记

假设有四个学生对象&#xff1a; name:"小明",height:168.8,age:22 name:"小红",height:178.5,age:20 name:"小智",height:160.1,age:21 name:"小白",height:230.6,age:22 现在需要按身高对他们进行排序 对象进行排序&#xff0c;默…

19.ADC模数转换器知识点+AD单通道AD多通道应用程序示例

0. 江协科技/江科大-STM32标准库开发-各章节详细笔记-查阅传送门_江协科技stm32笔记-CSDN博客文章浏览阅读2.9k次&#xff0c;点赞44次&#xff0c;收藏128次。江协科技/江科大-STM32标准库开发-各章节详细笔记-传送门至各个章节笔记。基本上课程讲的每句都详细记录&#xff0c…

修改 MySQL update_time 默认值的坑

由于按规范需要对 update_time 字段需要对它做默认值的设置 现在有一个原始的表是这样的 CREATE TABLE test_up (id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 主键id,update_time datetime default null COMMENT 操作时间,PRIMARY KEY (id) ) ENGINEInnoDB DEF…

xss——pdfxss,mxss,uxss,flashxss

uxss&#xff08;但是需要很低的版本才可以使用&#xff09;&#xff08;但是csdn也会有过滤&#xff09; 浏览器插件漏洞 搜索这个跨站语句&#xff0c;然后用翻译功能&#xff0c;它会触发跨站、 测试的时候可以去不断的测试它的所有功能&#xff0c;看也没有触发跨站 flas…

C语言笔记:控制流

ACM金牌带你零基础直达C语言精通-课程资料 本笔记属于船说系列课程之一&#xff0c;课程链接&#xff1a;ACM金牌带你零基础直达C语言精通 你也可以选择购买『船说系列课程-年度会员』产品『船票』&#xff0c;畅享一年内无限制学习已上线的所有船说系列课程&#xff1a;船票购…

1335:【例2-4】连通块

【算法分析】 设数组vis&#xff0c;vis[i][j]表示(i,j)位置已经访问过。遍历地图中的每个位置&#xff0c;尝试从每个位置开始进行搜索。如果该位置不是0且没有访问过&#xff0c;那么访问该位置&#xff0c;并尝试从其上下左右四个位置开始搜索。在看一个新的位置时&#xff…

网络机顶盒什么牌子好?小编盘点零差评网络机顶盒排行榜

在挑选网络机顶盒的时候我们往往会参考销量和口碑&#xff0c;小编花费一个月时间整理了热门网络机顶盒的用户评价情况&#xff0c;整理了这份口碑最好的网络机顶盒排行榜&#xff0c;跟着我一起看看网络机顶盒什么牌子好吧。 NO.1、泰捷WEBOX WE40S网络机顶盒 在混迹网络机顶…

Linux下的多线程编程:原理、工具及应用(1)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;Flower of Life—陽花 0:34━━━━━━️&#x1f49f;──────── 4:46 &#x1f504; ◀️ ⏸ ▶️ ☰ …

浅谈估值模型:从估值-收益分布看待市场投资价值

摘要及声明 1&#xff1a;本文从估值的角度&#xff0c;通过深入研究指数估值变化的特征&#xff0c;总结出市场几轮牛熊背后的规律&#xff0c;从而客观理性地判断目前市场的投资价值。技术方面&#xff0c;本文通过ipywidgets交互式控件实现数据的可视化和交互式展示。 2&a…

Git 学习笔记 三个区域、文件状态、分支、常用命令

Git 学习 GitGit概念VS Code中使用仓库&#xff08;repository&#xff09;示例 Git 使用时的三个区域示例 Git 文件状态示例 Git 暂存区示例 Git 回退版本删除文件忽略文件示例 分支分支的使用分支的合并与删除分支的合并冲突 Git常用命令Git远程仓库 (HTTP)步骤远程仓库 克隆…

游戏开发需不需要考研?

近年来&#xff0c;中国游戏行业增速放缓&#xff0c;用户基数趋于饱和&#xff0c;行业监管日趋严格&#xff0c;国外竞争激烈&#xff0c;使游戏公司面临挑战。为适应形势&#xff0c;游戏企业正在调整策略&#xff0c;采取主动学习和实战练习的方式&#xff0c;提升游戏质量…

虚拟环境的激活

(此博客仅用于我记录虚拟环境的激活方法) 虚拟环境的激活命令: venv/Scripts/activate 在F:\git repo\Database-Course-Design 这个文件夹中启动命令行 这个文件夹中含有虚拟环境venv 输入命令venv/Scripts/activate&#xff0c;就得到下面的结果: 此时就激活了虚拟环境&…

AVCE - AV Evasion Craft Online 更新 8 种加载方式 - 过 WD 等

免责声明&#xff1a;本工具仅供安全研究和教学目的使用&#xff0c;用户须自行承担因使用该工具而引起的一切法律及相关责任。作者概不对任何法律责任承担责任&#xff0c;且保留随时中止、修改或终止本工具的权利。使用者应当遵循当地法律法规&#xff0c;并理解并同意本声明…

3. ElasticSearch搜索技术深入与聚合查询实战

1. ES分词器详解 1.1 基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 1.2 …

[SWPUCTF 2021 新生赛]crypto6

题目&#xff1a; 从代码可以看出​​​​​​该题目对flag依次进行了base64,base32,base16加密。要得到正确的flag即进行相反的操作&#xff0c;即依次进行base16,32,64的解码即可

dp求公共子序列

#include<iostream> using namespace std; int main(){string a1,a2;while(cin>>a1>>a2){int data[201][201]{};// 每次的最长记录for(int i1;i<a1.size();i){for(int j1;j<a2.size();j){if(a1[i-1] a2[j-1]){// 相等在2个字母未加进之前长度1data[i]…

MOS管、IGBT的区别

MOS管&#xff0c;即Metal-Oxide-Semiconductor Field-Effect Transistor&#xff0c;是我们常见的一种半导体器件&#xff0c;也被广泛称为MOSFET。 这种器件的工作原理独特且高效&#xff0c;主要是通过控制栅极电压来调控电流在两个源极和漏极之间的流动&#xff0c;这也是其…

使用LLMs大模型进行股票投资预测——能实现盈利还能自我反思并给出合理解释

前言 股市的变化难以预测&#xff0c;任何微小的变化都可能对股票走势产生影响&#xff0c;这种不确定性让投资者们感到困惑。因此&#xff0c;研究者们开始关注目前备受关注的大型模型技术&#xff0c;他们试图利用这些技术来高效地处理和分析大量的股市数据&#xff0c;从中…

c++基础语法—————默认成员函数

文章目录 一、构造函数&#xff08;初始化&#xff09;1.构造函数的名称与类名相同&#xff0c;没有返回类型&#xff0c;可以有参数。2.对象实例化时&#xff0c;编译器自动调用构造函数进行初始化3.若类中没有显示定义一个用户的构造函数&#xff0c;编译器则会自动生成一个默…

[LVGL]:MACOS下使用LVGL模拟器

如何在MACOS下使用lvgl模拟器 1.安装必要环境 brew install sdl2查看sdl2安装位置&#xff1a; (base) ➜ ~ brew list sdl2 /opt/homebrew/Cellar/sdl2/2.30.1/bin/sdl2-config /opt/homebrew/Cellar/sdl2/2.30.1/include/SDL2/ (78 files) /opt/homebrew/Cellar/sdl2/2.3…