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

注意: vue 版本需要 ≥ 3.3

1、html

<el-selectv-model="relation_type"placeholder="请选择合作类型"ref="select"
><el-optionv-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.mzph.cn/diannao/9147.shtml

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

相关文章

车载测试系列:车载测试Bug定位与分析

车载Bug定位 1.1 模拟复现条件 能够复现bug才能对问题进行定位、解决以及验证。找到bug存在的特定的条件&#xff0c;进行重现。对于依赖外部输入的条件&#xff0c;如果条件比较复杂难以模拟可以在程序里预设直接进入对应状态。 1.2 打印Log 根据问题的现象&#xff0c;在…

Spring-依赖来源

依赖来源 1 Spring BeanDefinition&#xff08;xml,注解&#xff0c;BeanDefinitionBuilder, 还有API实现的单例对象&#xff09; 2 Spring 内建BeanDefinition 3 内建单例对象 依赖注入和依赖查找的区别 Context.refresh() 的时候会调用这个方法&#xff1a;prepareBeanF…

爬虫跟代理ip有什么不同

爬虫与代理IP的区别主要体现在它们的定义、功能和使用场景上。以下是对这两者的详细比较&#xff1a; 定义 爬虫&#xff1a; 爬虫是一种自动抓取互联网信息的脚本或者程序。它可以按照一定的规则&#xff0c;自动化地浏览网络中的信息&#xff0c;并将这些信息抓取下来&#x…

深入解析C#中的接口设计原则

深入解析C#中的接口设计原则 目录 深入解析C#中的接口设计原则 一、接口设计的SOLID原则 二、接口设计的最佳实践 三、接口设计的高级技术 四、结论 接口在面向对象编程中扮演着至关重要的角色。它们是定义行为契约的一种方式&#xff0c;允许实现者提供这些行为的具体实现…

扩展学习|结合故事的力量和数字的力量:混合方法研究和混合研究综述

文献来源&#xff1a;Pluye, Pierre, and Quan Nha Hong. "Combining the power of stories and the power of numbers: mixed methods research and mixed studies reviews." Annual review of public health 35 (2014): 29-45. 文献获取&#xff1a;链接&#xff1…

最靠谱线上线下相亲交友婚恋脱单渠道指南大全,单身必看!

刚好在30岁的年纪把自己嫁出去啦。以下这些都是我经历过的相亲途径&#xff0c;分享出来&#xff0c;希望能帮到大家 一.线上小程序/App 1.单身狗解救平台&#xff08;高质量人多&#xff0c;工作学历实名认证&#xff0c;你可能看到眼花&#xff0c;自己得有自己辨别力&#x…

<sa8650> snapdragon-auto-hqx-4-5-6-0基线代码camera开发错误记录

<sa8650> snapdragon-auto-hqx-4-5-6-0基线代码camera开发错误记录 一、 qcxserver自启动关不掉二、 qcxserver启动后串行器(MAX96717)detect不到?三、 qcarcam_test运行后系统log提示QCarCamReserve错误四、 tuning错误导致的异常DumpCore本文主要记录CAMERA开发过程中的一…

[ 项目 ] tcmalloc简化版—高并发内存池

目录 前言 基本介绍 高并发 内存池 定长内存池 基本介绍 框架设计 具体实现 性能测试 整体框架介绍 申请内存过程 threadcache 1.基本介绍 2.具体实现 centralcache 1.基本介绍 2.具体实现 pagecache 1.基本介绍 2.具体实现 申请内存连通 释放内存过…

探索智能编程新境界:我与Baidu Comate的独特体验之旅

文章目录 一、认识Baidu Comate二、VS Code安装Baidu Comate教程三、Baidu Comate功能体验功能概览具体功能1.根据注释自动生成代码2.函数注释3.行间注释4.代码解释5.生成单元测试6.代码优化7.答疑解惑 四、交互体验五、总结 一、认识Baidu Comate ✨Baidu Comate插件是一款基…

QT---day4事件

1、思维导图 2、 头文件 #ifndef MYWIDGET_H #define MYWIDGET_H #include <QWidget> #include<QIcon> //图标类 #include<QLabel> //标签类 #include<QMovie> //动图类 #include<QLineEdit> //行编辑器类 #include<QPushButton> //按钮…

阿里云开发uniapp之uni-starter

一、为什么使用uni-starter uni-starter是集成商用项目常见功能的、云端一体应用快速开发项目模版。 一个应用有很多通用的功能&#xff0c;比如登录注册、个人中心、设置、权限管理、拦截器、banner... uni-starter将这些功能都已经集成好&#xff0c;另外&#xff0c;uni-s…

QLabel文本

1. 文本自动换行 label->setWordWrap(true); 2. 文本居中显示 要将QLabel中的文本居中显示&#xff0c;可以使用setAlignment()方法来设置文本的对齐方式为居中。以下是一个示例代码&#xff1a; #include <QApplication> #include <QLabel>int main(int arg…

MySQL慢查询优化【三】

当面对MySQL中的慢查询时&#xff0c;可以根据不同的情况采取相应的优化方案。以下是几种常见的慢SQL情况及其对应的优化方案&#xff1a; 缺少索引的情况&#xff1a; SELECT * FROM orders WHERE customer_id 1000;如果orders表中的customer_id列没有索引&#xff0c;这个…

C:STDIN_FILENO和stdin的区别

1.STDIN_FILENO定义于文件/usr/include/unistd.h #define STDIN_FILENO 0 /* Standard input. */ #define STDOUT_FILENO 1 /* Standard output. */ #define STDERR_FILENO 2 /* Standard error output. */ 作为read&#xff0c;write&#…

【算法训练 day23 二叉搜索树的最小绝对差、二叉搜索树的众数、二叉树的最近公共祖先】

目录 一、二叉搜索树的最小绝对差-LeetCode 530思路实现代码递归处理使用数组 个人问题 二、二叉搜索树的众数-LeetCode 501思路实现代码map统计计数递归过程中计数 个人问题 三.二叉树的最近公共祖先-LeeCode 236思路实现代码个人问题总结 一、二叉搜索树的最小绝对差-LeetCod…

【退役之重学Java】如何处理消息丢失问题

即如何保证消息的可靠性传输 一、场景 网络丢包&#xff0c;导致丢失消息RabbitMQ 没来得及保存消息&#xff0c;就挂掉了消费者接受到消息&#xff0c;但没处理完&#xff0c;消费者挂掉了 二、怎么办 生产者 将 channel 设置为 confirm 模式&#xff0c;是异步模式&#x…

Linux-笔记 Makefile简单入门

1、Makefile Makefile是一种文本文件&#xff0c;通常用于定义项目的编译规则和依赖关系。它通常与GNU Make工具一起使用&#xff0c;用于自动化软件项目的构建过程。Makefile中包含了一系列规则&#xff0c;每个规则定义了如何生成一个或多个目标文件以及生成这些目标文件所需…

Baidu Comate智能编码助手

Baidu Comate智能编码助手 &#x1f388;1.Baidu Comate的简介&#x1f388;2.安装Baidu Comate&#x1f388;3.Baidu Comate实现功能&#x1f388;4.使用注释进行智能代码提示&#x1f388;5.结束语 &#x1f388;1.Baidu Comate的简介 根据官网的介绍&#xff0c;我们了解到B…

作为一名软件开发,您是否认同“如果代码有效,就不要修复它”这一理论?

请大家关注我的公众号&#xff0c;“老胡聊Java” 这句话非常有道理&#xff0c;因为这句话不仅包含了技术&#xff0c;而且还包含了人情世故。 1 一个项目的代码动辄几千几万行&#xff0c;而且分布的位置也不同&#xff0c;比如有java代码python代码&#xff0c;甚至还可能有…

力扣每日一题113:路径总和||

题目 中等 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,4,7,2,null,null,5,1], targetSu…