vue2中el-table 实现前端分页

一些接口不分页的数据列表,一次性返回大量数据会导致前端渲染卡顿,接口不做分页的情况下前端可以截取数据来做分页
以下是一个例子,被截取的列表和全量数据在同一个栈内存空间,所以如果有表格内的表单编辑,新的值也会事实同步到大列表,所以无需做特殊处理

html

        <el-table:data="tablePageData"><el-table-columnprop="code"label="编号"show-overflow-tooltip></el-table-column><el-table-columnprop="name"label="名称"show-overflow-tooltip></el-table-column></el-table><el-pagination:current-page.sync="tableParams.pageNum":page-size.sync="tableParams.pageSize"layout="total, sizes, prev, pager, next":page-sizes="[200]":total="tableData.length"/>

js

    data() {return {// 全量数据列表tableData: [],tableParams: {pageNum: 1,pageSize: 200,},};},computed: {// 设置分页,直接放到data里截取会导致被拷贝的数据没有被定义,多选框无法被选中tablePageData() {return this.tableData.slice((this.tableParams.pageNum - 1) * this.tableParams.pageSize,this.tableParams.pageNum * this.tableParams.pageSize);}},

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

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

相关文章

Python + moviepy:根据图片或数据高效生成视频全流程详解

前言 在数据可视化、自媒体内容生产、学术汇报等领域,我们常常需要将一组图片或一段变动的数据,自动合成为视频文件。这样不仅能提升内容表现力,也极大节省了人工操作时间。Python作为数据处理和自动化领域的王者,其`moviepy`库为我们提供了灵活高效的视频生成方案。本文将…

科技赋能,开启现代健康养生新潮流

在科技与生活深度融合的当下&#xff0c;健康养生也迎来了全新的打开方式。无需传统医学的介入&#xff0c;借助现代科学与智能设备&#xff0c;我们能以更高效、精准的方式守护健康。​ 饮食管理步入精准化时代。利用手机上的营养计算 APP&#xff0c;录入每日饮食&#xff0…

Ubuntu24.04 LTS安装java8、mysql8.0

在 Ubuntu 24.04 上安装 OpenJDK OpenJDK 包在 Ubuntu 24.04 的默认存储库中随时可用。 打开终端并运行以下 apt 命令: sudo apt update查看是否已经安装java java --version如果未安装会有提示&#xff0c;直接复制命令安装即可&#xff0c;默认版本&#xff1a; sudo apt in…

深度学习框架显存泄漏诊断手册(基于PyTorch的Memory Snapshot对比分析方法)

点击 “AladdinEdu&#xff0c;同学们用得起的【H卡】算力平台”&#xff0c;H卡级别算力&#xff0c;按量计费&#xff0c;灵活弹性&#xff0c;顶级配置&#xff0c;学生专属优惠。 一、显存泄漏&#xff1a;深度学习开发者的"隐形杀手" 在深度学习模型的训练与推…

Pytorch分布式训练,数据并行,单机多卡,多机多卡

分布式训练 所有代码可以见我github 仓库&#xff1a;https://github.com/xiejialong/ddp_learning.git 数据并行&#xff08;Data Parallelism&#xff0c;DP&#xff09; 跨多个gpu训练模型的最简单方法是使用 torch.nn.DataParallel. 在这种方法中&#xff0c;模型被复制…

【论文阅读】——D^3-Human: Dynamic Disentangled Digital Human from Monocular Vi

文章目录 摘要1 引言2 相关工作3 方法3.1 HmSDF 表示3.2 区域聚合3.3. 变形场3.4. 遮挡感知可微分渲染3.5 训练3.5.1 训练策略3.5.2 重建损失3.5.3 正则化限制 4. 实验4.1 定量评估4.2 定性评价4.3 消融研究4.4 应用程序 5 结论 摘要 我们介绍 D 3 D^{3} D3人&#xff0c;一种…

docker commit除了提交容器成镜像,还能搞什么之修改cmd命令

要让新镜像默认启动时执行 /usr/sbin/sshd -D&#xff0c;需在提交镜像时 ​​显式指定新的启动命令​​。 方法一&#xff1a;提交时通过 --change 覆盖 CMD docker commit --changeCMD ["/usr/sbin/sshd", "-D"] v2 project:v2 方法二&#xff1a;重…

为什么我输入对了密码,还是不能用 su 切换到 root?

“为什么我输入对了密码&#xff0c;还是不能用 su 切换到 root&#xff1f;” 其实这背后可能不是“密码错了”&#xff0c;而是系统不允许你用 su 切 root&#xff0c;即使密码对了。 &#x1f447; 以下是最常见的几个真正原因&#xff1a; ❌ 1. Root 用户没有设置密码&…

转移dp简单数学数论

1.转移dp问题 昨天的练习赛上有一个很好玩的起终点问题&#xff0c;第一时间给出bfs的写法。 但是写到后面发现不行&#xff0c;还得是的dp转移的写法才能完美的解决这道题目。 每个格子可以经过可以不经过&#xff0c;因此它的状态空间是2^&#xff08;n*m&#xff09;&…

IP查询基础介绍

IP 查询原理 IP 地址是网络设备唯一标识&#xff0c;IP 查询通过解析 IP 地址获取地理位置、运营商等信息。目前主流的 IPv4&#xff08;32 位&#xff09;与 IPv6&#xff08;128 位&#xff09;协议&#xff0c;前者理论提供约 43 亿地址&#xff0c;后者地址空间近乎无限。…

Linux命令简介

1 Linux系统的命令概述 在 Linux 操作系统中&#xff0c;凡是在字符操作界面中输入能够完成特定操作和任务的字符串都可以称为命令。严格来说&#xff0c;命令通常只代表实现某一类功能的指令或程序的名称。 1.1 Shell Linux 命令的执行必须依赖于 Shell 命令解释器。Shell …

WebRTC与RTSP|RTMP的技术对比:低延迟与稳定性如何决定音视频直播的未来

引言 音视频直播技术已经深刻影响了我们的生活方式&#xff0c;尤其是在教育、医疗、安防、娱乐等行业中&#xff0c;音视频技术成为了行业发展的重要推动力。近年来&#xff0c;WebRTC作为一种开源的实时通信技术&#xff0c;成为了音视频领域的重要选择&#xff0c;它使得浏览…

多通道振弦式数据采集仪MCU安装指南

设备介绍 数据采集仪 MCU集传统数据采集器与5G/4G,LoRa/RS485两种通信功能与一体的智能数据采集仪。该产品提供振弦、RS-485等的物理接口&#xff0c;能自动采集并存储多种自然资源、建筑、桥梁、城市管廊、大坝、隧道、水利、气象传感器的实时数据&#xff0c;利用现场采集的数…

Vue3 + Element Plus表格筛选样式设置

如果弹出框挂载在 body 下&#xff08;而非组件内部&#xff09;&#xff0c;scoped 样式无法生效&#xff0c;这时就需要使用全局样式。 强制全局样式 1、添加全局样式文件&#xff08;或在原有的文件中添加以下内容&#xff09; src/assets/global.scss /* 全局强制样式覆…

vue--ofd/pdf预览实现

背景 实现预览ofd/pdf超链接功能 业务实现 pdf的预览 实现方式&#xff1a; 直接使用 <iframe :src"${url}#navpanes0&toolbar0" /> 实现pdf的预览。 navpanes0 隐藏侧边栏toolbar0 隐藏顶部工具栏 使用pdf.js&#xff0c;代码先行&#xff1a; <tem…

【C++20新特性】ranges::sort()使用方法,优势,注意点

以下是关于 ranges::sort() 的详细说明&#xff1a; 1. ranges::sort() 的使用方法 ranges::sort() 是 C20 引入的基于范围&#xff08;Ranges&#xff09;的排序函数&#xff0c;其语法更简洁&#xff0c;支持直接操作容器或范围对象。 (1)基本用法 #include <vector&g…

深入理解设计模式之适配器模式

深入理解设计模式之适配器模式 1. 适配器模式概述 适配器模式(Adapter Pattern)是一种结构型设计模式&#xff0c;它允许将一个类的接口转换为客户端所期望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的类能够协同工作&#xff0c;扮演了"转换器&quo…

【数据结构 · 初阶】- 快速排序

目录 一. Hoare 版本 1. 单趟 2. 整体 3. 时间复杂度 4. 优化&#xff08;抢救一下&#xff09; 4.1 随机选 key 4.2 三数取中 二. 挖坑法 格式优化 三. 前后指针&#xff08;最好&#xff09; 四. 小区间优化 五. 改非递归 快速排序是 Hoare 提出的一种基于二叉树…

第2周 PINN核心技术揭秘: 如何用神经网络求解偏微分方程

1. PDEs与传统数值方法回顾 (Review of PDEs & Traditional Numerical Methods) 1.1 什么是偏微分方程 (Partial Differential Equations, PDEs)? 偏微分方程是描述自然界和工程领域中各种物理现象(如热量传播、流体流动、波的振动、电磁场分布等)的基本数学语言。 1.…

Neo4j(二) - 使用Cypher操作Neo4j

文章目录 前言一、Cypher简介二、数据库操作1. 创建数据库2. 查看数据库3. 删除数据库4. 切换数据库 三、节点、关系及属性操作1. 创建节点与关系1.1 语法1.2 示例 2. 查询数据2.1 语法2.2 示例 3. 更新数据3.1 语法3.2 示例 4. 删除节点与关系4.1 语法4.2 示例 5. 合并数据5.1…