当前位置: 首页 > 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; 捋清楚哪些是类设计…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...