el-table + el-pagination 前端实现分页操作
el-table + el-pagination 前端实现分页操作
后端返回全部列表数据，前端进行分页操作
html代码
<div><el-table :data="tableData" border><el-table-column label="序号" type="index" width="50" /><el-table-column prop="name" label="礼品名称"><template slot-scope="scope">{{ scope.row.orderInfo.itemName }}</template></el-table-column><el-table-column prop="orderNum" label="订单编号" width="120"><template slot-scope="scope">{{ scope.row.orderInfo.orderNum }}</template></el-table-column><el-table-column prop="name" label="物流编号" width="130"><template slot-scope="scope">{{ scope.row.orderInfo.expressCode }}</template></el-table-column><el-table-column prop="name" label="礼品单价" width="80"><template slot-scope="scope">{{ scope.row.orderInfo.unitPrice }}</template></el-table-column><el-table-column prop="name" label="礼品数量" width="80"><template slot-scope="scope">{{ scope.row.orderInfo.quantity }}</template></el-table-column><el-table-column prop="name" label="订单金额" width="80"><template slot-scope="scope">{{ scope.row.orderInfo.price }}</template></el-table-column><el-table-column prop="name" label="订单日期" width="130"><template slot-scope="scope">{{ scope.row.orderInfo.orderDate }}</template></el-table-column><el-table-column prop="isError" label="是否成功" width="80"><template slot-scope="scope">{{ scope.row.isError ? '否' : '是' }}</template></el-table-column><el-table-column prop="errorInfo" label="错误信息"><template slot-scope="scope">{{ scope.row.errorInfo }}</template></el-table-column></el-table><el-pagination:total="total":current-page="page":page-size="size":page-sizes="pageSizes"layout="total, sizes, prev, pager, next, jumper"@size-change="sizeChange"@current-change="currentChange"/>
</div>
js代码
两种方式：
① slice
② splice
<script>
export default {name: 'ImportLog',data() {return {page: 1, // 第几页size: 20, // 一页多少条total: 0, // 总条目数pageSizes: [20, 40, 60, 80, 100, 120, 140, 160, 180, 200], // 可选择的一页多少条tableData: [], // 表格绑定的数据allData: [], // 全部数据}},created() {this.getTabelData2()},methods: {// 获取表格数据，自行分页(slice)getTabelData() {// allData为全部数据this.tableData = this.allData.slice((this.page - 1) * this.size,this.page * this.size)this.total = this.allData.length},// 获取表格数据，自行分页（splice）getTabelData2() {const data = JSON.parse(JSON.stringify(this.allData))this.tableData = data.splice((this.page - 1) * this.size,this.size)this.total = this.allData.length},// page改变时的回调函数，参数为当前页码currentChange(val) {this.page = valthis.getTabelData2()},// size改变时回调的函数，参数为当前的sizesizeChange(val) {this.size = valthis.page = 1this.getTabelData2()}}
}
</script>
相关文章：
el-table + el-pagination 前端实现分页操作
el-table el-pagination 前端实现分页操作 后端返回全部列表数据，前端进行分页操作 html代码 <div><el-table :data"tableData" border><el-table-column label"序号" type"index" width"50" /><el…...
NIO ByteBuffer 总结
目录 基本概念创建 ByteBuffer核心属性关键方法切换模式读写操作压缩数据 基本概念 java.nio.ByteBuffer 是 Java NIO 中一个核心类， 用于高效处理二进制数据的读写操作。应用于通道（Channel）的I/O操作。作用： 数据缓冲…...
华为hcia——Datacom实验指南——配置IPv4静态路由，默认路由和浮动静态路由
什么是IPv4 IPv4静态路由，是手动配置的，不会随着网络拓扑的变化而变化，所配置的路由信息也不会在网络中传播，所以它主要运用在小型网络或者作为动态路由的补充。 IPv4的配置 配置的命令很简单 IP route-static （目…...
Git入门——常用指令汇总
以下是一份精心整理的 Git常用指令速查表，基本覆盖日常开发使用场景，建议收藏备用👇 🔧 环境配置 指令作用git config --global user.name "你的名字"设置全局用户名git config --global user.email "你的邮箱&qu…...
深入解析 MyBatis-Plus 批量操作：原理、实现与性能优化
引言 在高并发、大数据量场景下，批量数据库操作是提升系统性能的核心手段之一。本文以 MyBatis-Plus 为例，深入剖析 批量更新 和 自定义批量插入 的实现原理，并结合实战代码与性能测试，揭示其在高性能场景下的应用价值。 批量更新：动态 SQL 的极致运用 原理与 SQL 生成…...
2025年成都市双流区农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排
成都市双流区2025年农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排如下，需要申报的可指导！ 一、成都市双流区农业科技试验示范基地申报 （一）基地建设数量。2025年建设农业科技试验示范基地2个。 （二…...
8路CXP相机采集系统介绍
8xCXP相机采集系统介绍 目录 1 系统概述 4 2 硬件架构 5 2.1 FPGA处理单元 5 2.2 CXP接口层 6 2.3 CXP相机说明与使用要求 7 2.4 SSI控制器板 8 3 FPGA方案 9 3.1 FPGA实现 9 3.2 Block Design说明 10 4 软件方案 14 4.1 嵌入式层 14 4.2 上位机软件（C…...
)
vue2前端日志数据存储，推荐（IndexedDB)
前言：首先，我得回忆一下IndexedDB的基本概念和用法，确保自己理解正确。IndexedDB是一个浏览器内置的数据库，允许存储大量结构化数据，支持事务和索引查询，适合需要离线存储的应用场景。 接下来，用…...
onedav一为导航批量自动化导入网址（完整教程）
OneNav作为一个功能强大的导航工具，支持后台管理、加密链接、浏览器书签批量导入等功能，能够帮助用户轻松打造专属的导航页面。今天，我将为大家详细介绍如何实现OneNav导航站的批量自动化导入网址。 1、建立要批量导入的表格 格局需要创建表格，表格的要求是一定要有需要，…...
Ubuntu Linux安装PyQt5并配置Qt Designer
一 安装 PyQt5 借助 apt 包管理器来安装 PyQt5 及其相关的开发工具： sudo apt install python3-pyqt5 pyqt5-dev-tools 假如报错， You might want to run apt --fix-broken install to correct these. 直接执行： sudo apt --fix-…...
无人机螺旋桨平衡标准
螺旋桨平衡是确保无人机(UAV)平稳运行、可靠性和使用寿命的关键过程。螺旋桨的不平衡会导致振动、噪音，并加速关键部件的磨损，从而对飞行性能产生负面影响。 ISO 21940-11:2016标准为旋翼平衡提供了一个广泛引用的框架，定义了可接受的不平衡…...
基于MCP协议的多模态模型优化在医疗3D打印精密人工关节制造中的研究
一、引言 1.1 研究背景与意义 在全球人口老龄化趋势愈发明显的当下，诸如骨关节炎、类风湿性关节炎这类关节疾病的发病率不断攀升，进而使得人工关节置换手术的需求呈现出激增态势。人工关节置换手术作为治疗终末期关节疾病的有效手段，能够显著缓解患者疼痛，提升关节功能与生…...
ESLint报错：Could not find config file.
如果你的ESLint的版本大于 8，同时使用 .eslinrc.js 和 .eslintignore 作为配置文件，且目前用的是 VSCODE ，就有可能遇到报错： Could not find config file. 这个是因为 VSCode 中 ESLint 插件的配置 eslint.useFlatConfig 的问题…...
npm install 卡在创建项目：sill idealTree buildDeps
参考： https://blog.csdn.net/PengXing_Huang/article/details/136460133 或者再执行 npm install -g cnpm --registryhttps://registry.npm.taobao.org 或者换梯子...
drizzleDumper：基于内存搜索的Android脱壳工具
一、工具介绍 drizzleDumper 是一款基于内存搜索的 Android 脱壳工具，主要用于从加固的 Android 应用程序中提取原始的 DEX 文件。它通过分析应用程序运行时的内存，定位并提取被加固的 DEX 文件，从而帮助开发者、安全研究人员进行逆向工程和…...
信号处理中的窗
窗函数（Window Function）是一种在信号处理中常用的工具，用于对信号进行截断和加权处理。它在频谱分析、滤波器设计以及信号处理的许多其他领域中都发挥着重要作用。 窗函数的基本概念 窗函数本质上是一个有限长度的序列，通常用于…...
FFmpeg学习：AVPacket结构体
1.AVPacket结构体 FFmpeg中用于封装一帧的编码数据的结构体（比如H264视频帧或者AAC音频帧），主要用于编解码过程中数据的载体，使用av_read_frame()读取获得，或者使用avcodec_send_packet()进行解码，与AVFra…...
34.[前端开发-JavaScript基础]Day11-王者轮播图-书籍购物车-BOM对象-JSON
1 认识BOM操作 认识BOM 2 全局对象window window对象 window对象的作用 window常见的属性 window常见的方法 3 事件对象event window常见的事件 4 location、history location对象常见的属性 Location对象常见的方法 URLSearchParams history对象常见属性和方法 5 navigato…...
FLEXlm如何通过web调用
FLEXlm 是一种流行的软件许可管理工具，广泛用于各种软件产品的授权管理。它支持多种协议，包括传统的服务器-客户端模式和一些基于网络的解决方案。如果你想通过 Web 接口调用 FLEXlm 许可证服务器，你可以通过以下几种方式实现： 使…...
深度解析Spring Boot可执行JAR的构建与启动机制
一、Spring Boot应用打包架构演进 1.1 传统JAR包与Fat JAR对比 传统Java应用的JAR包在依赖管理上存在明显短板，依赖项需要单独配置classpath。Spring Boot创新的Fat JAR（又称Uber JAR）解决方案通过spring-boot-maven-plugin插件实现了"…...
Zookeeper运维指南：服务端与客户端常用命令详解
#作者：任少近 文章目录 1 Zookeeper服务端常用命令2 Zookeeper客户端常用命令2.1Ls命令2.2创建节点create2.3Get命令2.4删除命令2.5修改命令 1 Zookeeper服务端常用命令 启动ZK服务: bin/zkServer.sh start # ./zkServer.sh startZooKeeper JMX enabled by defau…...
K8S学习之基础五十一：k8s部署jenkins
k8s部署jenkins 创建nfs共享目录， mkdir -p /data/v2 echo /data/v2 *(rw,no_root_squash) > /etc/exports exportfs -arv创建pv、pvc vi pv.yaml apiVersion: v1 kind: PersistentVolume metadata:name: jenkins-k8s-pv spec:capacity:storage: 1GiaccessMod…...
界面控件DevExpress WinForms v25.1 - 人工智能（AI）方面全新升级
DevExpress WinForms拥有180组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜…...
基于动态光影融合的缺陷实时检测和材质量化方法，并且整合EventPS、VMNer和EvDiG
要完成基于动态光影融合的缺陷实时检测和材质量化方法，并且整合EventPS、VMNer和EvDiG，是一个复杂且综合性的任务。以下是一个大致的实现步骤和代码示例，不过要完整完成论文和所有实验还需要大量的细化和调整。 整体思路 数据加载与预处理&…...
关于我对接了deepseek之后部署到本地将数据存储到mysql的过程
写在前面 今天写一下使用nodejs作为服务端，vue作为客户端，mysql的数据库，对接deepseek的全过程，要实现一个很简单的效果就是，可以自由的询问，然后可以将询问的过程存储到mysql的数据库中。 文档对接 deeps…...
Android 中两个 APK 之间切换的几中方法
在 Android 中，两个 APK（应用程序）之间的切换通常是通过 Intent 来实现的。以下是一些常见的方法和注意事项，帮助你实现两个 APK 之间的切换。 一、启动目标 APK 的主 Activity 1、setPackage 方法 使用 Intent 的 setPackage …...
【LeetCode 热题 100】解答汇总
一、哈希表 1. 两数之和 | python【简单】 49. 字母异位词分组 | python【中等】 128. 最长连续序列 | python【中等】 二、双指针 283. 移动零 | python【简单】 盛最多水的容器 三数之和 接雨水 三、滑动窗口 3. 无重复字符的最长子串 | python 【中等】 49. 字母异…...
【RAG综述系列】之 RAG 相关背景和基本原理
系列文章： 【RAG综述系列】之 RAG 相关背景和基本原理 【RAG综述系列】之 RAG 特点与挑战以及方法与评估 【RAG综述系列】之 RAG 先进方法与综合评估 【RAG综述系列】之 RAG 应用和未来方向 正文： 检索增强生成（Retrieval-Augmented Gen…...
Unity 开发休闲手游：M_Studio 实战指南，源码课件全解析
Unity 开发休闲手游：M_Studio 实战指南，源码课件全解析 在手游开发领域，Unity 引擎凭借其强大的跨平台能力和丰富的资源，成为众多开发者的首选。今天，我们深入探讨如何利用 Unity 开发休闲手机游戏，以 M_S…...
HTML5 新的 Input 类型学习笔记
HTML5 引入了多种新的表单输入类型，这些新特性不仅增强了输入控制，还提供了更强大的验证功能，使表单设计更加灵活和便捷。以下是 HTML5 新的 Input 类型的详细学习笔记。 一、color 类型 功能：用于选取颜色。 使用场景ÿ…...
)
【第23节】windows网络编程模型(WSAEventSelect模型)
目录 引言 一、WSAEventSelect模型概述 二、 WSAEventSelect模型的实现流程 2.1 创建一个事件对象，注册网络事件 2.2 等待网络事件发生 2.3 获取网络事件 2.4 手动设置信号量和释放资源 三、 WSAEventSelect模型伪代码示例 四、完整实践示例代码 引言 在网…...
C# 中实现 跨线程写入
方案核心思路 写入请求队列：使用 ConcurrentQueue 接收来自任意线程的写入请求。 专用写入线程：由独立线程处理队列中的写入操作，确保顺序执行。 双信号机制：通过 ManualResetEventSlim 控制读取线程的暂停与恢复。 线程安全确…...
联合体（Union）的使用与应用场景
引言 在 C/C++ 编程中，联合体（Union）是一个非常独特的数据结构。与结构体（struct）不同，联合体允许不同的数据类型共享同一块内存空间，从而节省内存。在许多需要高效内存管理的场景下，联合体的使用能够显著提高程序的性能与资源利用率。本文将从联合体的基本概念入手，…...
Spark2 之 Expression/Functions
ExpressionConverter src/main/scala/org/apache/gluten/expression/ExpressionConverter.scala TopNTransformer src/main/scala/org/apache/gluten/execution/TopNTransformer.scala...
【Mysql】SQL 优化全解析
文章目录 一、理解执行计划1.1 执行计划的作用1.2 查看执行计划 二、查询优化2.1 避免全表扫描2.2 使用覆盖索引2.3 合理使用 JOIN 三、索引优化3.1 索引设计原则3.2 索引维护 在数据驱动的当今时代，MySQL 作为应用广泛的开源关系型数据库&…...
谈谈对spring IOC的理解，原理和实现
一、IoC 核心概念 1. 控制反转（Inversion of Control） 传统编程中对象自行管理依赖（主动创建），而IoC将控制权转移给容器，由容器负责对象的创建、装配和管理，实现依赖关系的反向控制。 2. 依赖…...
Element UI实现表格全选、半选
制作如图所示的表格全选、半选： 父组件 <template><div id"app"><SelectHost :hostArray"hostArray" /></div> </template><script> import SelectHost from ./components/SelectHost.vue export default…...
Dify实现自然语言生成SQL并执行
目录 一、需求分析 二、解决思路 问题1：文字描述生成SQL语句 问题2：执行生成的SQL语句 完整解决方案 三、最终效果展示 四、具体实现 1.Agent提示词 2.知识库数据 3.sql执行器工作流创建 3.1 节点1 3.2 节点2 3.3 节点3 3.4 最终配置界面预…...
【leetcode hot 100 347】前 K 个高频元素
解法一：用map的value记录key出现的次数，用PriorityQueue构造最小堆。 class Solution {public int[] topKFrequent(int[] nums, int k) {// 把元素放在map中Map<Integer,Integer> map new HashMap<>();for(int num:nums){if(map.containsK…...
golang不使用锁的情况下，对slice执行并发写操作，是否会有并发问题呢？
背景 并发问题最简单的解决方案加个锁，但是，加锁就会有资源争用，提高并发能力其中的一个优化方向就是减少锁的使用。 我在之前的这篇文章《开启多个协程，并行对struct中的每个元素操作，是否会引起并发问题？》中讨论过多协程场景下struct的并发问题。 Go语言中的slice在…...
一文了解Gradle 依赖管理（五）- 依赖管理缓存依赖
文章目录 1. 版本目录 (Version Catalogs)1. 版本目录的概念与优势2. 主要优势3. 基本配置4. 使用版本目录5.使用外部版本目录文件6.实际项目中的版本目录最佳实践 2. 依赖锁定（Dependency Locking）1. 依赖锁定的概念与重要性2. 主要优势3. 如何启用依赖…...
如何在 Postman 中发送 PUT 请求？
在 Postman 中发送 PUT 请求的步骤相对简单，包括新建接口、选择 PUT 方法、填写 URL 和参数等几个主要步骤。 Postman 发送 put 请求教程...
Ubuntu20.04.6系统根目录扩容
文章目录 方法一：**1. 检查磁盘和分区情况****2. 扩展 vda3 分区****3. 扩展 LVM 物理卷****4. 扩展 LVM 逻辑卷****5. 扩展文件系统** 方法二:1. 查看当前磁盘分区情况2. 创建新分区3. 重新加载分区表4. 扩展物理卷（PV）5. 扩展逻辑卷&#x…...
《AI赋能SQL Server，数据处理“狂飙”之路》
在数字化浪潮汹涌的当下，企业的数据量犹如滚雪球般飞速增长。据统计，过去几年全球数据量的年增长率高达30%以上 ，海量数据如同双刃剑，既蕴含着无限商机，也给数据处理带来巨大挑战。SQL Server作为一款强大的关系型数据…...
c++ 日志框架G3log介绍及在嵌入式Linux上的移植（交叉编译）
在开发高性能的C应用程序时，一个高效的日志框架是不可或缺的。G3log是一个开源的日志库，以其高性能和易于使用著称，特别适用于嵌入式Linux环境。本文将详细介绍G3log的主要特性和如何在嵌入式Linux平台上进行交叉编译。 G3log介绍 G3log 是一…...
Buffer overFolw---Kryo序列化出现缓冲区溢出的问题解决
问题： 由于我的数据量太大，我设置批次为10000万，50w数据大概有400M左右，然后进行spark数据处理时候报错为org.apache.spark.SparkException:Kryo serialization failed:Buffer overFolw.Available:0,rquired 58900977,To …...
leetcode日常刷题
题目：K个一组翻转链表 思路 题目要求k个一组进行反转，首先考虑到如果k为1，那就可以直接返回链表头，这种情况没必要翻转。 如果只有一个节点或者head为空结点，直接返回head即可（一个节点翻转k次都是本身&am…...
菜鸡前端计算机强基计划之CS50 第七课 python 入门—— Python 中yield专题学习
菜鸡前端计算机强基计划之CS50 第七课 python 入门—— Python 中yield专题学习 1. 什么是 yield？直观感受 2. 生成器是什么？一个简单的例子 3. yield 的工作原理（图形化解释）4. yield 和内存的魔法用列表返回所有值用生成器逐步生…...
密码学——知识问答
目录 1、阐述公开密钥算法的定义，结合RSA算法说明公钥密码的基本要求。 说明公钥与私钥两种密码学并举例与其应用 1. 公钥密码学（非对称加密）： 2. 私钥密码学（对称加密）： 对比公钥与私钥密码…...
Talos-docker版本中创建 Kubernetes 集群
在talos容器化版本中部署Kubernetes集群，用于折腾学习。 1.系统信息 虚拟机软件：VMware Worktation 虚拟机配置：4G内存 4vCPU 200GB磁盘 操作系统：CentOS7.9 docker：20.10.15 PS：为啥VMware Worktat…...