前端进行分页Vue3+Setup写法

当后端不方便提供数据分页查询接口时,就需要前端来自己分割进行分页操作

在有可能的情况下还是建议用分页查询接口,减少网络数据传输

首先el-table绑定数组

 分页组件,变量自己定义防止报错

 <el-paginationlayout="->, total, sizes, prev, pager, next":total="totalHeatSource":current-page="pageNumberHeatSource":page-size="pageSizeHeatSource"@current-change="handleCurrentChangeHeatSource"@size-change="handleSizeChangeHeatSource":page-sizes="[5, 10, 15, 20]"background/>

先从接口一次性返回所有数据(几百条数据还不算卡,成千上万条数据时,避免前端做分页,或者懒加载)

const get_heatsource = () => {parametersuperApi.get_heatsource_api(regulatoryBodiesId.value).then((res: any) => {if (res.errorcode == 0) {if (res.data.length != 0) {tableDataHeatSource.value = res.datatotalHeatSource.value = res.data.length}} else {ElMessage.error(res.message)}})
}

 利用slice方法来进行数据分页,代码里缺少的当前页和每页个数自行定义

const get_heatsource_page_data = () => {tableDataHeatSourcePageData.value = tableDataHeatSource.value.slice((pageNumberHeatSource.value - 1) * pageSizeHeatSource.value,pageNumberHeatSource.value * pageSizeHeatSource.value)
}

 如果当前页或者每页个数变化时都需要重新对原始数据进行切割分组,当每页个数切换变化时,需要把当前页置为第一页,因为数据总条数不变情况下,每页个数改变,页签会重新计算有几页分多少页

const handleSizeChangeHeatSource = (val: number) => {pageSizeHeatSource.value = valpageNumberHeatSource.value = 1get_heatsource_page_data()
}
const handleCurrentChangeHeatSource = (val: number) => {pageNumberHeatSource.value = valget_heatsource_page_data()
}

最后,当数据量过大时还是建议让后端写分页查询接口,否则前端分页会大大浪费性能和造成页面卡顿,几十条几百条还能应付

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/404243.html

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

相关文章

HTML中的<fieldset>标签元素框的使用

HTML 提供的 <fieldset> 标签用于在表单中分组相关元素。 <fieldset> 标签会在相关元素周围绘制一个框。 <legend> 标签为 fieldset 元素定义标题。 语法如下&#xff1a; <fieldset><legend>标题</legend><!-- 元素内容... -->…

qt-17不规则窗体

不规则窗体 知识点shape.hshape.cppmain.cpp运行图 知识点 感觉这个就是在图片背景 贴了白色 shape.h #ifndef SHAPE_H #define SHAPE_H#include <QWidget>class Shape : public QWidget {Q_OBJECTpublic:Shape(QWidget *parent nullptr);~Shape(); protected:void m…

最新图像修复论文汇总(2024年以来)(三)

汇总了自2024年以来新提出的高质量图像修复工作&#xff0c;包含扩散模型、transformer、mamba、sam等最前沿的技术&#xff0c;其中一些是ICLR、ICML、CVPR、ECCV、ACM MM 2024年的新作。 这里是第三部分&#xff0c;还有两部分请参阅。 最新图像修复论文汇总&#xff08;20…

【Python快速入门和实践013】Python常用脚本-目标检测之按照类别数量划分数据集

一、功能介绍 这段代码实现了从给定的图像和标签文件夹中分割数据集为训练集、验证集和测试集的功能。以下是代码功能的总结&#xff1a; 创建目标文件夹结构&#xff1a; 在指定的根目录&#xff08;dataset_root&#xff09;下创建images和labels两个文件夹。在这两个文件夹下…

瑞友科技项目经理认证负责人杨文娟受邀为第四届中国项目经理大会演讲嘉宾︱PMO评论

全国项目经理专业人士年度盛会 北京瑞友科技股份有限公司项目经理认证负责人杨文娟女士受邀为PMO评论主办的全国项目经理专业人士年度盛会——2024第四届中国项目经理大会演讲嘉宾&#xff0c;演讲议题为“瑞友科技项目经理人才培养体系落地实践”。大会将于10月26-27日在北京举…

【C++】C++11新增特性

目录 C11简介&#xff1a; 1、统一的列表初始化&#xff1a; std::initializer_list 2、自动类型推导&#xff1a; auto&#xff1a; decltype&#xff1a; 3、final 和 override final&#xff1a; override&#xff1a; 4、默认成员函数控制&#xff1a; 显示缺省…

第132天:内网安全-横向移动Exchange服务有账户CVE漏洞无账户口令爆破

域控环境0day.org 通过网盘分享的文件&#xff1a;131-0day.org内网域环境镜像文件 链接: https://pan.baidu.com/s/1rf_gHVJSNG8PEsiSr7DFSw?pwdr5jc 提取码: r5jc 给win7设置一张nat网卡&#xff0c;其他各个主机都设置为vm2 案例一&#xff1a; 域横向移动-内网服务-Exchan…

如何快速将地址解析为经纬度坐标?

GIS数据转换器的"地址转坐标"功能&#xff0c;可以帮助用户将地址文本快速转换为对应的经纬度坐标&#xff0c;广泛应用于地图定位、数据分析、GIS项目、在线导航、城市规划、紧急服务以及科学研究等多个领域&#xff0c;极大地提高了地理信息处理的效率和准确性。下…

【题解】—— LeetCode一周小结32

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结31 5.不含连续1的非负整数 题目链接&#xff1a;600. 不含连续…

C++的序列容器——数组

前言&#xff1a; 这篇文章我们就开始新的章节&#xff0c;我们之前说的C/C的缺陷那部分内容就结束了。在开始新的章之前我希望大家可以先对着题目思考一下&#xff0c;C的容器是什么&#xff1f;有什么作用&#xff1f;下面让我们开始新的内容&#xff1a; 目录 前言&#x…

Golang | Leetcode Golang题解之第343题整数拆分

题目&#xff1a; 题解&#xff1a; func integerBreak(n int) int {if n < 3 {return n - 1}quotient : n / 3remainder : n % 3if remainder 0 {return int(math.Pow(3, float64(quotient)))} else if remainder 1 {return int(math.Pow(3, float64(quotient - 1))) * …

简简单单用用perf

实践前提&#xff1a;正确安装 perf 和 FlameGrap。若没安装&#xff0c;心领神会亦可。 1 示例程序 #define m_loop() ({ for(int i0; i < 1000000; i); })void fb(void) {m_loop(); }void fj(void) {fb(); }void fy(void) {m_loop(); }void loop(void) {for (;;) {fy();…

WPF动画

补间动画&#xff1a;动画本质就是在一个时间段内对象尺寸、位移、旋转角度、缩放、颜色、透明度等属性值的连续变化。也包括图形变形的属性。时间、变化的对象、变化的值 工业应用场景&#xff1a;蚂蚁线、旋转、高度变化、指针偏移、小车 WPF动画与分类 特定对象处理动画过…

xss.function靶场(easy)

文章目录 第一关Ma Spaghet!第二关Jefff第三关Ugandan Knuckles第四关Ricardo Milos第五关Ah Thats Hawt第六关Ligma第七关Mafia第八关Ok, Boomer 网址&#xff1a;https://xss.pwnfunction.com/ 第一关Ma Spaghet! 源码 <!-- Challenge --> <h2 id"spaghet&qu…

【精选】基于Python大型购物商城系统(京东购物商城,淘宝购物商城,拼多多购物商城爬虫系统)

目录&#xff1a; 目录&#xff1a; 系统介绍&#xff1a; 系统开发技术 Python语言 Django框架简介 MySQL数据库技术 B/S架构 系统设计 系统总体设计 系统详细界面实现&#xff1a; 系统测试 测试目的 测试用例 本章小结 参考代码&#xff1a; 为什么选择我&…

Ubuntu中编译使用ANTs(医学图像配准)含github无法访问问题解决

目录 第一步、修改hosts文件 1.打开https://github.com.ipaddress.com/ 2.打开https://fastly.net.ipaddress.com/github.global.ssl.fastly.net#ipinfo 3.打开hosts文件&#xff0c;并在文件末尾添加如下内容 第二步、编译ANTs 1&#xff09;首先安装git、cmake以及c编译…

如何在桌面同时展示多个窗口

一、实现2分屏显示 win箭头 二、实现3分屏显示 1. 在实现2分屏显示的基础上&#xff0c;再次点击箭头图标&#xff0c;这次选择屏幕的上方或下方。 2. 点击后&#xff0c;第三个窗口将会出现在你选择的区域。现在&#xff0c;你可以在三个窗口之间自由切换&#xff0c;提高工…

WebSocket协议解析与Java实践

文章目录 一、HTTP协议与HTTPS协议1.HTTP协议的用处2.HTTP协议的特点3.HTTP协议的工作流程4.HTTPS协议的用处5.HTTPS协议的特点6.HTTPS协议的工作流程 二、WebSocket协议出现的原因1. 传统的HTTP请求-响应模型2. 轮询&#xff08;Polling&#xff09;3. 长轮询&#xff08;Long…

虚幻5|AI巡逻宠物伴随及定点巡逻—初步篇

一.建立AI基本三件套 1.建立AI基本三件套 二.使用AI的基本设置 1.打开我们想要用的AI宠物的蓝图&#xff0c;选中自我Actor,右侧细节处找到AI&#xff0c;选中对应的AI控制器 三.打开AI控制器 写如下 四&#xff0c;AI行为树 1.新建一个任务&#xff0c;命名含巡逻二字即可…

一文读懂 服务器

一文读懂 服务器 马上就是毕业季了&#xff0c;做好的毕设不免上云服务器来演示一下&#xff0c;让自己答辩时加分。但相信很多小伙伴对服务器没有一个实体的概念&#xff0c;不明白什么是服务器&#xff0c;和平时使用的计算机又有什么区别。在网络上&#xff0c;经常看见的什…