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...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
《Offer来了:Java面试核心知识点精讲》大纲
文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...
用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法
用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...
32位寻址与64位寻址
32位寻址与64位寻址 32位寻址是什么? 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元(地址),其核心含义与能力如下: 1. 核心定义 地址位宽:CPU或内存控制器用32位…...
