实现Element Select选择器滚动加载

<template><el-selectpopper-class="more-tag-data"v-model="tagId"filterableplaceholder="请选择"@focus="focusTag"><el-optionv-for="(item, index) in taskTagLists":key="index":label="item.name":value="item.id"></el-option></el-select>
</template><script>
export default {data() {return {tagPage: {pageSize: 10,currentPage: 1,total: 0},taskTagLists: []}},created() {getTmpList({pageNum: this.tagPage.currentPage,pageSize: this.tagPage.pageSize}).then(res => {this.tagPage.total = res.data.totalthis.taskTagLists = res.data.list})},methods: {focusTag() {// 获取dom节点const domElementNode = document.querySelector('.more-tag-data .el-select-dropdown__wrap')// 注册下拉滚动事件domElementNode.addEventListener('scroll',  ()=>{const isBottom = domElementNode.scrollHeight - domElementNode.scrollTop <= domElementNode.clientHeightif (isBottom) {this.loadMore()}})},loadMore() {if(this.tagPage.currentPage * this.tagPage.pageSize < this.tagPage.total) {this.tagPage.currentPage ++this.getTageValue()}},getTageValue() {getTmpList({pageNum: this.tagPage.currentPage,pageSize: this.tagPage.pageSize}).then(res => {this.taskTagLists = this.taskTagLists.concat(res.data.list)})}}
}
</script>

注意:

        因为select组件在默认情况下是display:none的状态,所以不能把监听滚动事件放到mounted内,会获取不到元素class。

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

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

相关文章

如何在小程序中设置导航栏文字颜色和背景颜色

不同商家有不同的颜色风格&#xff0c;例如有些做设计的公司&#xff0c;主要是黑色风格&#xff1b;有些卖珠宝的商家&#xff0c;主要是金色风格&#xff1b;他们的小程序&#xff0c;也需要进行同样的风格设定。下面具体介绍怎么在小程序中进行整个风格设定。 1. 在小程序管…

破局「二次创业」:合思的新解法

在新的水温下&#xff0c;寻找更为良性的发展正在成为企业的必答题。对此&#xff0c;合思给出的不仅是一份更“省”的答题方法。也更是从认知层到行动层&#xff0c;最后到工具层的一张授人以渔的“渔网”。 作者|思杭 编辑|皮爷 出品|产业家 今年4月初&#xff0c;广州…

lvgl 界面管理器

lv_scr_mgr lvgl 界面管理器 适配 lvgl 8.3 降低界面之间的耦合使用较小的内存&#xff0c;界面切换后会自动释放内存内存泄漏检测 使用方法 在lv_scr_mgr_port.h 中创建一个枚举&#xff0c;用于界面ID为每个界面创建一个页面管理器句柄将界面句柄添加到 lv_scr_mgr_por…

【基础篇】三、Flink集群角色、系统架构以及作业提交流程

文章目录 1、集群角色2、部署模式3、Flink系统架构3.1 作业管理器&#xff08;JobManager&#xff09;3.2 任务管理器&#xff08;TaskManager&#xff09; 4、独立部署会话模式下的作业提交流程5、Yarn部署的应用模式下作业提交流程 1、集群角色 Flink提交作业和执行任务&…

EXCEL——根据单元格值设置不同色阶

方法&#xff1a;开始—>条件格式—>色阶&#xff08;默认色阶或复杂色阶&#xff09;。 一、默认色阶 如图&#xff0c;可选择自定义的色阶模式。 二、复杂色阶 1、如图&#xff0c;点击"其他规则" 2、选择复杂格式 此时可以看到&#xff0c;支持多种格式…

有 AI,无障碍,AIoT 设备为视障人群提供便利

据世界卫生组织统计&#xff0c;全球共 22 亿人视力受损&#xff0c;包含 2.85 亿视障人群和 3,900 万全盲人群。而且&#xff0c;这一数字将随老龄化加剧不断增加。 虽然视障人群面临着诸多不便&#xff0c;但是针对视障人群的辅助设备却存在成本高、维护困难、操作复杂等问题…

给你一个项目,你将如何开展性能测试工作?

一、性能三连问 1、何时进行性能测试&#xff1f; 性能测试的工作是基于系统功能已经完备或者已经趋于完备之上的&#xff0c;在功能还不够完备的情况下没有多大的意义。因为后期功能完善上会对系统的性能有影响&#xff0c;过早进入性能测试会出现测试结果不准确、浪费测试资…

MQTT C库下载

方法一、从Eclipse paho下载 https://eclipse.dev/paho/index.php?pagedownloads.php 方法二&#xff0c;从MQTT官网下载 https://mqtt.org/software/ https://os.mbed.com/teams/mqtt/code/MQTTPacket/ MQTTPacket源码和paho下载的差不多 方法三、从Keil5 包管理工具…

centos7安装db2 version11.1

centos7安装DB2 操作系统 linux centos7 DB2版本 11.1 1、取包 IBM MRS Tool 将安装包放在 /home/software 下面 mkdir -p /home/software cd /home/software wget https://iwm.dhe.ibm.com/sdfdl/v2/regs2/db2pmopn/Express-C/DB2ExpressC11/Xa.2/Xb.aA_60_-i7wWKFMFpbW1xl1…

【数据结构】什么是线性表?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 线性表的定义 生活中常见的线性表 结语 线性表的定义 线性结构的特点: 在数据元素的非空有限集中: 存在唯一的一个被称作"第一个"的数据元素;存在唯一的一个…

10个打工人必备AI神器,升职加薪靠AI

HI&#xff0c;同学们&#xff0c;我是赤辰&#xff0c;本期是第18篇AI工具类教程&#xff0c;文章底部准备了粉丝福利&#xff0c;看完后可领取&#xff01;1. Runway&#xff08;文字转视频AI工具&#xff09; 只需要一句提示词就能精确生成你所想象的视频场景&#xff0c;还…

nnunetv2训练报错 ValueError: mmap length is greater than file size

目录 报错解决办法 报错 笔者在使用 nnunetv2 进行 KiTS19肾脏肿瘤分割实验的训练步骤中 使用 2d 和3d_lowres 训练都没有问题 nnUNetv2_train 40 2d 0nnUNetv2_train 40 3d_lowres 0但是使用 3d_cascade_fullres 和 3d_fullres 训练 nnUNetv2_train 40 3d_cascade_fullres …

Prometheus:优秀和强大的监控报警工具

文章目录 概述Prometheus的底层技术和原理数据模型数据采集数据存储查询语言数据可视化 Prometheus的部署Prometheus的使用配置数据采集目标查询监控数据设置警报规则 查看数据可视化总结 概述 Prometheus是一款开源的监控和警报工具&#xff0c;用于收集和存储系统和应用程序…

Xcode 14.3.1build 报错整理

1、Command PhaseScriptExecution failed with a nonzero exit code 2、In /Users/XX/XX/XX/fayuan-mediator-app-rn/ios/Pods/CocoaLibEvent/lib/libevent.a(buffer.o), building for iOS Simulator, but linking in object file built for iOS, file /Users/XX/XX/XX/fayuan…

软件设计之抽象工厂模式

抽象工厂模式指把一个产品变成一个接口&#xff0c;它的子产品作为接口的实现&#xff0c;所以还需要一个总抽象工厂和它的分抽象工厂。 下面我们用一个案例去说明抽象工厂模式。 在class中可以选择super类和medium类&#xff0c;即选择一个产品的子类。在type中可以选择产品的…

OJ项目——统一数据格式返回,我是如何处理的?

目录 前言 OJ项目中是如何处理的 1、准备一个类&#xff0c;作为统一的数据返回格式 2、准备一个类&#xff0c;实现ResponseBodyAdvice接口 3、我们如何写返回值更好 4、进一步优化返回值 小结 前言 关于SpringBoot的同一功能处理&#xff0c;本博主在这篇博客已经有介…

竞赛 深度学习 机器视觉 车位识别车道线检测 - python opencv

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 车位识别车道线检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) …

学习编程-先改变心态

编程失败的天才 林一和我很久以前就认识了——我从五年级就认识他了。他是班上最聪明的孩子。如果每个人在家庭作业或考试准备方面需要帮助&#xff0c;他们都会去那里。 有趣的是&#xff0c;林一不是那种连续学习几个小时的孩子。 他的聪明才智似乎与生俱来&#xff0c;几乎毫…

从一部iPhone手机看芯片的分类

目录 问题 iPhone X 手机处理器&#xff1a;A11 iPhone X 的两大存储芯片 数字 IC CPU&#xff1a;计算设备的运算核心和控制核心 GPU&#xff1a;图形处理器 ASIC&#xff1a;为解决特定应用问题而定制设计的集成电路 存储芯片&#xff1a;DRAM 和 NAND Flash iPhone…

C# Thread.Sleep(0)有什么用?

一、理论分析 回答这个要先从线程时间精度&#xff08;时间片&#xff09;开始说起。很多参考书说&#xff0c;默认情况下&#xff0c;时间片为15ms 左右&#xff0c;但是这是已经过时的知识。在老的 Windows 操作系统里&#xff0c;应用程序模式时时间片 15ms 左右&#xff0…