vue使用ant design Vue中的a-select组件实现下拉分页加载数据
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="equipmentTypeId"
label="所属设备种类">
<a-select v-model="model.equipmentTypeId" @popupScroll="handlePopupScroll" placeholder="请选择所属设备种类 " mode="multiple">
<a-select-option v-for="(item, index) in typeList" :value="item.id" :key="item.id">
{{ item.equipmentTypeName }}
</a-select-option>
</a-select>
</a-form-model-item>
import { getDeviceTypeList } from '@/api/home'
export default {
data () {
typeList: [],
pageObj: {
pageNo: 1,
pageSize: 10,
pages: 0, // 总页数
total: 0, // 总条数
}
}
}
methods: {
// 下拉列表滚动时的回调
handlePopupScroll (e) {
console.log(e)
if (this.pageObj.pageNo >= this.pageObj.pages) return;
const { target } = e;
const { scrollTop, scrollHeight, clientHeight } = target;
if (scrollTop + 2 + clientHeight >= scrollHeight) {
// 已经到达底部,触发分页逻辑
// todo 这里就可以触发加载下一页请求 具体函数根据当前业务需求来定
this.pageObj.pageNo = ++this.pageObj.pageNo;
this.pageObj.pageSize+1
this.getTypeList(true)
}
},
getTypeList(isScroll = false) {
let param = {
pageNo: this.pageObj.pageNo,
pageSize: this.pageObj.pageSize
}
getDeviceTypeList(param).then((res) => {
if (res.success) {
this.pageObj.pages = res.result.pages;
this.typeList = isScroll == false ? [] : this.typeList;
res.result.records.forEach((e) => {
// 成功之后的数据应该push进数组中,而不是直接等于,否则就是下拉换页的效果了。
this.typeList.push(e);
});
}
})
},
}
相关文章:
vue使用ant design Vue中的a-select组件实现下拉分页加载数据
<a-form-model-item :labelCol"labelCol" :wrapperCol"wrapperCol" prop"equipmentTypeId" label"所属设备种类"> <a-select v-model"model.equipmentTypeId" popupScroll"handlePopupScroll" placehold…...
精准突击!GitHub星标103k,2023年整理1658页JAVA秋招面试题
前言: 现在的互联网开发岗招聘,程序员面试背八股文已经成为了不可逆转的形式,其中一个Java岗几百人在投简历也已经成为了常态!更何况一份面试题动辄七八百道,你吃透了,技术只要不是很差,面试怎…...
GEE:基于GLDAS数据集分析土壤湿度的时间序列变化
作者:CSDN @ _养乐多_ 本篇博客将介绍如何使用Google Earth Engine(GEE)进行土壤湿度数据的分析。我们将使用NASA GLDAS(Global Land Data Assimilation System)数据集,其中包括了关于土壤湿度的信息。通过该数据集,我们将了解土壤湿度在特定区域和时间段内的变化,并生…...
Nacos安装
Nacos安装 1.Windows安装 1.1.下载安装包 在Nacos的GitHub页面,提供有下载链接,可以下载编译好的Nacos服务端或者源代码: GitHub主页:https://github.com/alibaba/nacos GitHub的Release下载页:https://github.co…...
UE4和C++ 开发-C++与UMG的交互2(C++获取UMG的属性)
1、...C获取UMG的属性 1.1、第一种方法:通过名称获取控件。 void UMyUserWidget::NativeConstruct() {Super::NativeConstruct();//通过名字,获取蓝图控件中的按钮引用。CtnClic Cast<UButton>(GetWidgetFromName(TEXT("Button_44"))…...
Ubuntu 22.04.3 LTS单机私有化部署sealos
推荐使用奇数台 Master 节点和若干 Node 节点操作系统 :Ubuntu 22.04 LTS内核版本 :5.4 及以上配置推荐 :CPU 4 核 , 内存 8GB, 存储空间 100GB 以上最小配置 :CPU 2 核 , 内存 4GB, 存储空间 60GB 这里采用的Ubuntu 22.04.3 LTS 版本,Ubuntu 20.04.4 LTS这个版本…...
#力扣:2236. 判断根结点是否等于子结点之和@FDDLC
2236. 判断根结点是否等于子结点之和 一、Java /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNo…...
暴力递归转动态规划(九)
题目 题有点难,但还挺有趣 有一个咖啡机数组arr[],其中arr[i]代表每一个咖啡机冲泡咖啡所需的时间,有整数N,代表着准备冲咖啡的N个人(假设这个人拿到咖啡后喝完的时间为0,拿手里咖啡杯即变空)&a…...
Linux知识点 -- 高级IO(一)
Linux知识点 – 高级IO(一) 文章目录 Linux知识点 -- 高级IO(一)一、5种IO模型1.IO再理解2.阻塞IO3.非阻塞轮询式IO4.信号驱动IO5.IO多路转接6.异步IO7.同步通信vs异步通信8.阻塞vs非阻塞 二、非阻塞IO1.设置非阻塞的方法2.非阻塞…...
Android AMS——内存回收机制(十二)
在 Android 中,AMS(Activity Manager Service)负责管理应用程序的生命周期和资源分配。其中,AMS也包含了内存回收机制,用于释放系统中不再使用的内存资源,以保证系统的稳定性和性能。 一、内存回收简介 1、回收机制 Android AMS 的内存回收机制主要涉及以下几个方面:…...
1600*C. Add One(数位DP找规律)
Problem - 1513C - Codeforces 解析: 考虑DP,DP[ i ] 为从 0 开始执行 i 次操作,此时数字的位数。 我们发现当一个9再操作一次就会变成1和0,并且相邻的大部分长度都不会变化,0会影响10次操作之后的位数,1会…...
干货丨送你几个实用PR编辑技巧(二) 优漫动游
小编认为无论看什么书或教程,都不应该脱离实际去学习PR技巧,基础理论与实践相结合,才能达到比较好的学习和应用效果。 技巧一 如果项目板里有很多素材,很难看清楚哪些素材是已经用过的,哪些是没用过的话࿰…...
[每周一更]-(第67期):docker-compose 部署php的laravel项目
容器化部署laravel框架的php项目 操作步骤 参考: https://www.cnblogs.com/jingjingxyk/p/16842937.htmlhttps://developer.aliyun.com/article/708976 0、plv项目修改 composer install.env 修改后台地址 IP:端口chmod -R 777 public / chmod -R 777 storagevi…...
vsCode 忽略 文件上传
1 无 .gitignore 文件时,在项目文件右键,Git Bash 进入命令行 输入 touch .gitignore 生成gitignore文件 2 、在文件.gitignore里输入 node_modules/ dist/ 来自于:vscode git提交代码忽略node_modules_老妖zZ的博客-CSDN博客...
197、管理 RabbitMQ 的虚拟主机
开启Rabbitmq的一些命令: 小黑窗输入: rabbitmq-plugins enable rabbitmq_management 启动控制台插件, 就是启动登录rabbitmq控制台的页面,rabbitmq_management 代表了RabbitMQ的管理界面。 rabbitmq-server 启动rabbitMQ服务器…...
[NCTF2019]SQLi regexp 盲注
/robots.txt 访问一下 $black_list "/limit|by|substr|mid|,|admin|benchmark|like|or|char|union|substring|select|greatest|%00|\|| |in|<|>|-|\.|\(\)|#|and|if|database|users|where|table|concat|insert|join|having|sleep/i";If $_POST[passwd] admi…...
通过webpack创建并打包js库到npm仓库
1.创建项目并进行基本配置 webpack配置文件: webpack.build.js const path require(path);module.exports {mode:development,entry:./src/webpack-numbers.js,output: {filename: webpack-numbers.js,path: path.resolve(__dirname, dist),clean: true,},}; p…...
【Java 进阶篇】深入了解JavaScript中的函数
函数是JavaScript编程中的核心概念之一。它们是可重用的代码块,可以帮助您组织和管理程序,使您的代码更具可读性和可维护性。在本篇博客中,我们将深入了解JavaScript中的函数,包括函数的基本语法、参数、返回值、作用域、闭包和高…...
谷歌 Chrome 浏览器正推进“追踪保护”功能
导读近日消息,根据国外科技媒体 Windows Latest 报道,谷歌计划在 Chrome 浏览器中推进“追踪保护”(Tracking Protection)功能,整合浏览器现有隐私功能,保护用户被网站跟踪。 根据一项 Chromium 提案&…...
Excel 自动提取某一列不重复值
IFERROR(INDEX($A$1:$A$14,MATCH(0,COUNTIF($C$1:C1,$A$1:$A$14),0)),"")注意:C1要空置,从C2输入公式 参考: https://blog.csdn.net/STR_Liang/article/details/105182654 https://zhuanlan.zhihu.com/p/55219017?utm_id0...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权
摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题:安全。文章将详细阐述认证(Authentication) 与授权(Authorization的核心概念,对比传统 Session-Cookie 与现代 JWT(JS…...
