element-ui select 下拉框做成下拉加载更多

注意: vue 版本需要 ≥ 3.3

1、html

<el-select
	v-model="relation_type"
	placeholder="请选择合作类型"
	ref="select"
>
	<el-option
		v-for="item in cooperationTypeList"
		:key="item.value"
		:label="item.label"
		:value="item.value"
	/>
</el-select>

2、主文件

import { useElSelectionInfinityScroll } from '@/utils/combinationFunc';
setup(props, context) {
	const data = reactive({
		noMore: false,
		loading: false,
		cooperationTypeList: []
	});
	const { proxy } = getCurrentInstance();
	const loadMore = () => {
		if (data.loading) return;
		data.loading = true;
		if (proxy.cooperationTypeList.length > 40) {
			// 获取到最后的值时,不再监听滚动条的动作,移除滚动事件
			data.noMore = true;
		}
		proxy.cooperationTypeList.push(...proxy.cooperationTypeList);
		data.loading = false;
	};
	onMounted(() => {
		const elem = proxy.$refs.select.$refs.scrollbar.$refs.wrap;
		useElSelectionInfinityScroll(elem, loadMore, () => data.noMore);
	});
}

自行补充接口调用相关方法

3、 @/utils/combinationFunc.js

import { onUnmounted, toValue, watchEffect } from 'vue';
import { Throttle } from '@/utils/debunce';

export function useElSelectionInfinityScroll(target, callback, noMore) {
	onUnmounted(() => target.removeEventListener('scroll', Throttle(scolling, 300)));
	const scolling = () => {
		if (toValue(noMore)) return;
		const canLoadMore = target.scrollHeight - target.scrollTop <= target.clientHeight;
		if (canLoadMore) {
			callback();
		}
	};
	watchEffect(() => { scolling(); });
	target.addEventListener('scroll', scolling);
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

点击导航栏选项后,导航栏高亮该选项

如图所示&#xff0c;点击“流浪猫客栈”时&#xff0c;会一直高亮显示&#xff0c;表示现在看的是这个选项的页面。 Cat.jsp上写&#xff1a; <!--header--> <jsp:include page"header.jsp"><jsp:param name"flag" value"3">…

上位机图像处理和嵌入式模块部署(树莓派4b和c++新版本的问题)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 自己读书的时候是03年&#xff0c;学习c也是差不多04年开始&#xff0c;到现在基本上20年了。这20年过程当中&#xff0c;其实c的语言版本一直是在…

SSRF漏洞学习

1.ssrf漏洞简介 ssrf&#xff08;服务器端请求伪造&#xff09;&#xff0c;它是由攻击者构造形成的由服务端发起的一个较为安全的漏洞。 它攻击的目标是从外网无法访问的内部系统&#xff0c;因为它是从服务端发起的&#xff0c;所以它能够请求到与它相连并且与外网隔离的内部…

PXE批量部署,一键安装配置多台Linux系统

目录 一、PXE批量部署的优点 二、搭建PXE远程安装服务器 1. 实验初始化设置 2. 一键安装软件包 3. 复制 vmlinuz、initrd.img、pxelinux.0文件 4. 配置PE启动菜单配置文件 5. 修改配置文件&#xff0c; 启动各个软件服务 6. kickstart自动应答文件修改启动菜单配置文件…

【用文本生成歌声】Learn2Sing 2.0——歌声转换算法即梅尔频谱详解

一. 频谱图与梅尔谱图的介绍 频谱图&#xff1a;频谱图可以理解为一堆垂直堆叠在一起的快速傅里叶变换结果。 1.1 信号 在进入频谱图模块之前&#xff0c;首先我们需要了解信号是什么。 信号就是某一特定量随时间变化&#xff0c;对于音频来说&#xff0c;这个特定的变化量就…

java.net.SocketInputStream.socketRead0 卡死导致 tomcat 线程池打满的问题

0 TL;DR; 问题与原因&#xff1a;某些特定条件下 java.net.SocketInputStream.socketRead0 方法会卡死&#xff0c;导致运行线程一直被占用导致泄露采用的方案&#xff1a;使用监控线程异步监控卡死事件&#xff0c;如果发生直接关闭网络连接释放链接以及对应的线程 1. 问题 …

pytest教程-42-钩子函数-pytest_runtest_makereport

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了pytest_runtest_teardown钩子函数的使用方法&#xff0c;本小节我们讲解一下pytest_runtest_makereport钩子函数的使用方法。 pytest_runtest_makereport 钩子函数在 pytest 为每个测试生成报…

修改表空间的状态

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 表空间有4种状态:联机、脱机、只读和读写。修改其中某一种状态的语句如下所示 设置表空间 tspace 为联机状态。 SQL>ALTER TABLESPACE space ONLINE: 设置表空间 tspa…

Python运维之多线程!!

一、多线程 二、多线程编程之threading模块 2.1、使用threading进行多线程操作有两种方法&#xff1a; 三、多线程同步之Lock&#xff08;互斥锁&#xff09; 四、多线程同步之Semaphore&#xff08;信号量&#xff09; 五、多线程同步之Condition 六、多线程同步之Event…

开发Web3 ETF的技术难点

开发Web3 ETF&#xff08;Exchange-Traded Fund&#xff0c;交易所交易基金&#xff09;软件时&#xff0c;需要注意以下几个关键问题。开发Web3 ETF软件是一个复杂的过程&#xff0c;涉及到金融、法律和技术多个领域的专业知识。开发团队需要综合考虑上述问题&#xff0c;以确…

kubernate 基本概念

一 K8S 是什么&#xff1f; K8S 全称&#xff1a;Kubernetes 作用&#xff1a; 用于自动部署、扩展和管理“容器化&#xff08;containerized&#xff09;应用程序”的开源系统。 可以理解成 K8S 是负责自动化运维管理多个容器化程序&#xff08;比如 Docker&#xff09;的…

Linux域名解析

1.hosts:windows c盘下面 Linux: /etc/hosts 作用:实现名字解析&#xff0c;主要为本地主机名、集群节点提供快速解析。平面式结构&#xff0c;集中式数据库。 缺点:不便于查询更新 2.DNS:域名系统 作用:实现名字解析(分层性&#xff0c;层次性) FQDN:完全合格域名/全称域…

3月空气净化器市场数据分析,热门品牌排行榜揭晓!

三月上旬以来&#xff0c;中国空气净化器行业的规模持续扩大&#xff0c;市场规模和消费需求也在不断提升&#xff0c;消费者对高质量空气的需求增加。智能化是当前空气净化器市场的一个重要发展方向&#xff0c;这类产品集成了空气过滤、监测等功能&#xff0c;满足了现代消费…

音乐爱好者户外好伙伴,HOLME NEO开放式蓝牙耳机体验

现在天气开始热起来了&#xff0c;很适合户外活动&#xff0c;我出门时一般都会戴上一副耳机&#xff0c;特别是那种开放式的蓝牙耳机&#xff0c;我觉得很适合现在使用。最近我在用的是一款虹觅HOLME NEO&#xff0c;这款开放式蓝牙耳机设计独特&#xff0c;而且音质不错&…

力扣138. 随机链表的复制

Problem: 138. 随机链表的复制 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.创建Map集合Map<Node, Node> map;创建指针cur指向head&#xff1b; 2.遍历链表将cur作为键&#xff0c;new Node(cur.val)作为值&#xff0c;存入map集合&#xff1b; 3.再次…

[机器学习系列]深入探索回归决策树:从参数选择到模型可视化

目录 一、回归决策树的参数 二、准备数据 三、构建回归决策树 (一)拟合模型 (二)预测数据 (三)查看特征重要性 (四)查看模型拟合效果 (五) 可视化回归决策树真实值和预测值 (六)可视化决策树并保存 部分结果如下&#xff1a; 一、回归决策树的参数 DecisionTreeRegress…

英特尔StoryTTS:新数据集让文本到语音(TTS)表达更具丰富性和灵感

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享&#xff0c;与你一起了解前沿深度学习信息&#xff01; 英特尔StoryTTS&#xff1a;新数据集让文本到语音&#xff08;TTS&#xff09;表达更具丰富性和灵感 引言&#xff1a;探索文本表达性在语音合成中的重要性 …

【深耕 Python】Quantum Computing 量子计算机(3)重要数学公式一览

写在前面 往期量子计算机博客&#xff1a; 【深耕 Python】Quantum Computing 量子计算机&#xff08;1&#xff09;图像绘制基础 【深耕 Python】Quantum Computing 量子计算机&#xff08;2&#xff09;绘制电子运动平面波 正文 偏微分&#xff1a; 交换关系&#xff…

NOIP,CSP-J,CSP-S——图

一、图的基本概念 图是顶点和边的集合 1、无向图: 每一条边都是无方向的 2、有向图: 每一条边都是有方向的 3、完全图: 任意两个顶点都有一条边相连接; 4、结论 若n个顶点的无向图有n(n-1)/2条边,称为无向完成图; 若n个顶点的有向图有n(n-1)条边,称为有向完成图…

华为eNSP Pro模拟器下载(普通账号可用)

好消息&#xff01;华为终于开放了普通账号使用权限&#xff01; 安装教程下载后见《指导手册-eNSP Pro V100R001C00.pdf》 华为eNSP Pro模拟器下载&#xff08;普通账号可用&#xff09; 下载地址 华为eNSP Pro模拟器下载&#xff08;普通账号可用&#xff09; - 下一朵云 …