当前位置: 首页 > news >正文

vue3.0 + element plus 全局自定义指令:select滚动分页

需求:项目里面下拉框数据较多 ,一次性请求数据,体验差,效果就是滚动进行分页。

看到这个需求的时候,我第一反应就是封装成自定义指令,这样回头用的时候,直接调用就可以了。

第一步请添加图片描述
第二步:
在main.js页面全局引入:

import directive from './directive' 
directive(app)

第三步:selectloadmore.js文件的代码

// 自定义指令export default {mounted(el, binding) {console.log(binding.value);const SELECTWRAP_DOM = document.querySelector(`${binding.value.className} .el-select-dropdown .el-select-dropdown__wrap`);if (SELECTWRAP_DOM) {SELECTWRAP_DOM.addEventListener('scroll', function () {const condition = this.scrollTop + this.clientHeight >= this.scrollHeight - 1;// 当滚动条滚动到最底下的时候执行接口加载下一页if (condition) {binding.value.loadMore && binding.value.loadMore();}});}},
};

第四步:页面使用

 <el-select v-model="queryParams.responsePerson" popper-class="myOption"  placeholder="请选择" v-selectloadmore="{className:'.myOption',loadMore:loadMore}"><el-optionv-for="item in responseOptions":key="item.value":label="item.label":value="item.value"clearable/></el-select>
v-selectloadmore="{className:'.myOption',loadMore:loadMore}",这个地方加入className是为了页面上如果有多个这种下拉框,进行区分

第五步:loadMore方法,这个根据实际功能进行逻辑调整

//自定义指令
let page = ref(1);
let totalCount = ref(0);
function loadMore() {if (page.value <= parseInt(totalCount.value / 10)) {page.value += 1;//获得接口数据loadOptions(page.value);}
}
function loadOptions(page) {proxyList({ status: 1, page_size: 10, page: page}).then((res) => {let arr = res.data.map((item)=>{return {label:item.name,value:item.id,}});responseOptions.value = responseOptions.value.concat(arr);totalCount.value = res.total;});
}

在使用的下拉框的地方,需要调用这个

page.value = 1;//这个千万不要忘了啊,因为这个忘了,我找了一晚上加一上午(需求是在弹窗里面,然后每次关闭弹窗,我重新打开下拉框的时候,就只会加载一次,哭死,找了那么久,都快绝望了)
responseOptions.value = [];//也要初始化一下,不然会重复添加
loadOptions(1);//其实相当于初始化

好了结束,方便后面自己查阅

相关文章:

vue3.0 + element plus 全局自定义指令:select滚动分页

需求&#xff1a;项目里面下拉框数据较多 &#xff0c;一次性请求数据&#xff0c;体验差&#xff0c;效果就是滚动进行分页。 看到这个需求的时候&#xff0c;我第一反应就是封装成自定义指令&#xff0c;这样回头用的时候&#xff0c;直接调用就可以了。 第一步 第二步&…...

HarmonyOS/OpenHarmony 离线加载web资源,并实现web资源更新

关键词&#xff1a;h5离线包加载、h5离线包更新、沙箱 在上一篇文章中&#xff0c;我们已经介绍了如何将 rawfile 资源文件中的文件数据拷贝到沙箱下&#xff0c;那么该篇文章将介绍如何加载该沙箱目录下的文件资源&#xff08;此处以打包后的web资源为例&#xff09;&#xf…...

【Spark 实战】基于spark3.4.2+iceberg1.6.1搭建本地调试环境

基于spark3.4.2iceberg1.6.1搭建本地调试环境 文章目录 基于spark3.4.2iceberg1.6.1搭建本地调试环境环境准备使用maven构建sparksql编辑SparkSQL简单任务附录A iceberg术语参考 环境准备 IntelliJ IDEA 2024.1.2 (Ultimate Edition)JDK 1.8Spark 3.4.2Iceberg 1.6.1 使用mave…...

TCP连接建立中不携带数据的报文段为何不消耗序号解析

在TCP协议中&#xff0c;序号的使用是为了确保数据能够按照正确的顺序被接收端重组和确认。每个TCP报文段都有一个序号字段&#xff0c;用于标识该报文段中数据的起始位置相对于整个数据流的偏移量。 初始序号和三次握手 在TCP连接的建立过程中&#xff0c;三次握手是确保双方…...

JS设计模式之状态模式:优雅地管理应用中产生的不同状态

一. 前言 在过去&#xff0c;我们经常使用条件语句&#xff08;if-else 语句&#xff09;来处理应用程序中的不同状态。然而&#xff0c;这种方式往往会让代码变得冗长、难以维护&#xff0c;并可能引入潜在的 bug。而状态模式则提供了一种更加结构化和可扩展的方法来处理状态…...

C语言系列4——指针与数组(1)

我们开始C语言的指针与数组 这部分开始进阶了&#xff0c;得反复学习 在开始正题之前&#xff0c;写说一下我们都知道当写一个函数的时候需要进行传参&#xff0c;当实参传递给形参的时候&#xff0c;形参是有独立空间的&#xff0c;那么数组传参又是怎么样的呢&#xff0c;我…...

JS网页设计案例

下面是一个简单的 JavaScript 网页设计案例&#xff0c;展示了如何使用 HTML、CSS 和 JavaScript 创建一个动态的网页。 案例&#xff1a;简单的待办事项列表 1. HTML 部分 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8…...

4.2.1 通过DTS传递物理中断号给Linux

点击查看系列文章 》 Interrupt Pipeline系列文章大纲-CSDN博客 4.2.1 通过DTS传递物理中断号给Linux 参考《GICv3_Software_Overview_Official_Release_B》&#xff0c;下表描述了GIC V3支持的INTID(硬件中断号)的范围。 SGI (Software Generated Interrupt)&#xff1a;软…...

常用性能优化方法

在一个Java项目中进行性能优化是至关重要的。性能优化能够提高项目的效率和响应速度&#xff0c;提升用户体验&#xff0c;并且可以节省服务器资源和成本。 首先&#xff0c;性能优化可以确保项目的高效运行。当项目在运行时&#xff0c;性能问题可能会导致应用程序变慢、响应时…...

上海我店:创新模式引领本地生活新风尚

近年来&#xff0c;一个名为“上海我店”的新兴平台在网络空间中迅速崛起&#xff0c;其公布的业绩令人瞩目——在短短三年内&#xff0c;交易流水已跨越百亿大关&#xff0c;并在最近一个月内迎来了近百万的新增注册用户。这一强劲的增长势头&#xff0c;无疑吸引了众多商家和…...

【微服务】前端微服务qiankun 2.x主子应用通信代码片段

主应用代码 主应用工程里面源代码新建qiankun/index.js&#xff0c;通信代码如下&#xff1a; import { initGlobalState } from "qiankun"; import store from /store// 主应用与微应用数据通信 const state {subappClassName: // 设置子应用打包根的class类名 …...

高级java每日一道面试题-2024年9月30日-算法篇-LRU是什么?如何实现?

如果有遗漏,评论区告诉我进行补充 面试官: LRU是什么?如何实现? 我回答: LRU&#xff08;Least Recently Used&#xff09;是一种常用的缓存淘汰策略&#xff0c;用于在缓存满时决定哪些数据应该被移除。LRU算法的基本思想是&#xff1a;当缓存达到其容量上限时&#xff0…...

CSS选择器的全面解析与实战应用

CSS选择器的全面解析与实战应用 一、基本选择器1.1 通配符选择器&#xff08;*&#xff09;2.标签选择器&#xff08;div&#xff09;1.3 类名选择器&#xff08;.class&#xff09;4. id选择器&#xff08;#id&#xff09; 二、 属性选择器&#xff08;attr&#xff09;三、伪…...

vue3自动暴露element-plus组件的ref

自动暴露子组件的方法&#xff0c;注意在TS下&#xff0c;需要自己声明类型&#xff0c;我这里全用any代替了 <template><el-button click"getFocus">获得焦点</el-button><com ref"comRef" /> </template><script setup…...

龙芯+FreeRTOS+LVGL实战笔记(新)——10蜂鸣器嘀嘀嘀

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇,主要的区别在于实时操作系统的不同,章节的安排和任务的推进保持一致,并对源码做了完善与优化,各位可以先到本人主页下去浏览另一专栏的博客列表(目前已撰写36篇,图1所示),再决定是否订阅。此外,也可以…...

微信小程序-数据模型与动态赋值

首先新建一个小程序项目. 这边有创建基础项目的流程:从0新建一个微信小程序实现一个简单跳转_小白开发小程序源代码-CSDN博客 一共两步: 1.建立页面的 数据模型 和 默认赋值: 默认赋值: 2.接收输入框的新文案,动态替换上面的文案展示 //文件 testUI.js增加方法:onInputChan…...

【Redis】Linux下安装配置及通过C++访问Redis

文章目录 一、Linux Centos 7.0版本下的安装及配置二、通过C访问Redis 一、Linux Centos 7.0版本下的安装及配置 通过源来安装&#xff0c;此次安装的版本为 redis 5.0 的&#xff0c;要通过其他源进行安装&#xff0c;首先安装 scl 源 yum install centos-release-scl-rh再安…...

Python 入门教程(4)数据类型 | 4.7、元组

文章目录 一、元组1、定义2、创建3、访问元组元素4、遍历元组5、 前言&#xff1a; 在Python编程中&#xff0c;元组&#xff08;tuple&#xff09;是一种内置的数据结构&#xff0c;它提供了一种存储多个项目&#xff08;元素&#xff09;的方式&#xff0c;这些项目可以是不同…...

Temu正在吸引越来越多的亚马逊卖家,这个市场Temu蝉联下载榜首

近年来&#xff0c;全球电商市场竞争愈发激烈&#xff0c;各大平台纷纷使出浑身解数&#xff0c;以期在激烈的市场竞争中脱颖而出。 一个来自中国的新兴电商平台——Temu&#xff0c;凭借其独特的市场策略和迅猛的发展势头&#xff0c;正在吸引越来越多的亚马逊卖家。Temu为美国…...

设计原则模式概览

前言 架构设计是软件系统稳定的核心因素&#xff0c;也是程序员晋级架构师的核心因素&#xff0c;建议日常开发过程中针对设计进行深挖与思考 核心 分清楚哪些是稳定的&#xff0c;哪些是变化的&#xff08;一定有稳定跟变化的成分&#xff09;&#xff1b; 捋清楚哪些是类设计…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...