【React】Ant Design -- Table分页功能实现

实现步骤

  1. 为Table组件指定pagination属性来展示分页效果
  2. 在分页切换事件中获取到筛选表单中选中的数据
  3. 使用当前页数据修改params参数依赖引起接口重新调用获取最新数据
const pageChange = (page) => {
    // 拿到当前页参数 修改params 引起接口更新
    setParams({
      ...params,
      page
    })
}

return (
   <Table rowKey="id" columns={columns} dataSource={article.list} pagination={{
      current: params.page,
      pageSize: params.per_page,
      onChange: pageChange,
      total: article.count
    }} />
)

相关属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Finding and exploting an unused API endpoint

Using 0$ account buy a piece of lether priced at $133 1、尝试访问api接口 大概率可能访问不到,但是可以尝试访问下 /api/swagger/v1 /openapi.json 2、页面功能点寻找 api send to Repeter 3、Find Supported HTTP请求 POST方法测试 通过测试得知支持GET方法和PATC…

[产品]理解产品

课程安排 认识互联网行业 1.行业对比 2.互联网公司 广义理解: 互联网行业的公司大都以计算机网络技术为基础, 利用网络平台帮助企业提供服务, 并以此获取收入 3.行业细分 典型产品 认识产品经理 1.职责差异 不同类型的公司, 产品经理岗位所负责的工作都是略有差异的 1,外包…

Docker Desktop 简易操作指南 (Windows, macOS, Linux)

1. 下载最新版本 Docker Desktop https://www.docker.com/products/docker-desktop/ 2.启动 Docker Desktop 3.常用命令&#xff08;在 cmd 或 Terminal 中执行&#xff09; #列出所有镜像&#xff08;Images&#xff09; docker images #列出所有容器&#xff08;Containers&…

后端之路——阿里云OSS云存储

一、何为阿里云OSS 全名叫“阿里云对象存储OSS”&#xff0c;就是云存储&#xff0c;前端发文件到服务器&#xff0c;服务器不用再存到本地磁盘&#xff0c;可以直接传给“阿里云OSS”&#xff0c;存在网上。 二、怎么用 大体逻辑&#xff1a; 细分的话就是&#xff1a; 1、准…

visual studio 2022配置和使用protobuf

上图证明&#xff0c;我真的测了好多遍&#xff0c;测了好多版本的protobuf&#xff0c;花了很多时间。不过好在最后在vs2022上测通了。 下载protobuf 这里是protobuf下载的地址。 Releases protocolbuffers/protobuf GitHub 个人使用的3.21.9这个版本才跑通的。 1、首先…

Lesson 48 Do you like ... ? Do you want ... ?

Lesson 48 Do you like … ? Do you want … ? 词汇 fresh a. 新鲜的【食物】 搭配&#xff1a;fresh water 淡水    fresh man 新生    fresh air 新鲜空气    fresh egg 新鲜鸡蛋 例句&#xff1a;我们喜欢新鲜的空气。    We like fresh egg. egg n. 蛋【通…

unity知识点 专项四 一文彻底说清楚(锚点(anchor)、中心点(pivot)、位置(position)之间的关系)

一 概述 想要使UI控件在屏幕中达到正确的显示效果&#xff0c;比如自适应屏幕尺寸、固定边距等等&#xff0c;首先要理清楚几个基本概念和设置&#xff1a;锚点(anchor)、中心点(pivot)、位置(position)、UI缩放模式、父物件的transform设置 二 Anchor、Pivot与Position 2…

Qualcomm QCA206x EasyMesh For Ubuntu

1. 引言 关于EasyMesh概念我们这里就不再过多的赘述&#xff0c;此篇文档的目的是&#xff0c;让广大初学者&#xff0c;有一个很方便的平台进行EasyMesh的学习和测试。 2. X86 Ubuntu平台 2.1 硬件环境准备 备注&#xff1a;QCA206x WiFi module推荐使用移远的FC64E/FC66E。…

代码随想录算法训练营第74天:路径总结[1]

代码随想录算法训练营第74天&#xff1a;路径总结 ‍ A * 算法精讲 &#xff08;A star算法&#xff09; 卡码网&#xff1a;126. 骑士的攻击(opens new window) 题目描述 在象棋中&#xff0c;马和象的移动规则分别是“马走日”和“象走田”。现给定骑士的起始坐标和目标…

细说MCU的ADC模块单通道连续采样的实现方法

目录 一、工程依赖的硬件及背景 二、设计目的 三、建立工程 1、配置GPIO 2、选择时钟源和Debug 3、配置ADC 4、配置系统时钟和ADC时钟 5、配置TIM3 6、配置串口 四、代码修改 1、重定义TIM3中断回调函数 2、启动ADC及重写其回调函数 3、定义用于存储转换结果的数…

【深度学习练习】心脏病预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、什么是RNN RNN与传统神经网络最大的区别在于&#xff0c;每次都会将前一次的输出结果&#xff0c;带到下一隐藏层中一起训练。如下图所示&#xff1a; …

macOS版ChatGPT更新:修复AI对话纯文本存储问题

猫头虎 &#x1f42f; 建联猫头虎&#xff0c;商务合作&#xff0c;产品评测&#xff0c;产品推广&#xff0c;个人自媒体创作&#xff0c;超级个体&#xff0c;涨粉秘籍&#xff0c;一起探索编程世界的无限可能&#xff01; macOS版ChatGPT更新&#xff1a;修复AI对话纯文本…

C++ 空间和时间高效的二项式系数(Space and time efficient Binomial Coefficient)

这里函数采用两个参数n和k&#xff0c;并返回二项式系数 C(n, k) 的值。 例子&#xff1a; 输入&#xff1a; n 4 和 k 2 输出&#xff1a; 6 解释&#xff1a; 4 C 2 等于 4!/(2!*2!) 6 输入&#xff1a; n 5 和 k 2 输出&#xff1a; 10 解释&#xff1a; 5 C …

maven项目、idea抽风问题解决

开发的时候遇到奇奇怪怪的非技术问题&#xff0c;解决起来会费时间&#xff0c;做无用功。   这里记录常见的情况和解决方法 1.未识别maven项目 文件的图标变成了这种橙色的&#xff0c;而且有主启动函数也不能run 右键pom文件&#xff0c;点击Add as Maven Project 如果…

揭开梵蒂冈秘密档案馆的神秘面纱

关注我们 - 数字罗塞塔计划 - PART 01 深邃的历史 梵蒂冈秘密档案馆起源于公元8世纪&#xff0c;负责保存官方文书和教皇书信。9世纪开始在圣彼得大教堂设立档案库&#xff0c;负责保管外交和法律文件&#xff0c;在帕拉蒂诺山塔内保存经济和行政方面的档案。11至13世纪&…

SpringBoot AOP面向切面编程 基础

介绍 在 Spring Boot 中&#xff0c;AOP&#xff08;面向切面编程&#xff09;是一种强大的技术&#xff0c;它允许你在应用程序中横切关注点&#xff0c;比如日志记录、事务管理、性能监控等&#xff0c;从而避免重复代码和混乱 可以记录操作日志 权限控制 。 依赖 <dep…

HTMLCSS(入门)

HTML <html> <head><title>第一个页面</title></head><body>键盘敲烂&#xff0c;工资过万</body> </html> <!DOCTYPE>文档类型声明&#xff0c;告诉浏览器使用哪种HTML版本显示网页 <!DOCTYPE html>当前页面采取…

go语言day08 泛型 自定义错误处理 go关键字:协程

泛型&#xff1a; 抛错误异常 实现error接口类型 用java语言解释的话&#xff0c;实现类需要重写error类型的抽象方法Error().这样就可以自定义异常处理。 回到go语言&#xff0c;在Error()方法中用*argError 这样一个指针类来充当error接口的实现类。 在f2()方法中定义返回值…

本地部署秘塔开源搜索引擎

秘塔AI搜索是由秘塔科技于2024年初推出的一款新型搜索引擎&#xff0c;被业界誉为“中国版的Perplexity”。秘塔科技成立于2018年4月&#xff0c;其核心团队包括CEO闵可锐、技术专家唐悦和首席运营官王益为等。秘塔AI搜索以其高效简洁的特点受到关注&#xff0c;其搜索结果直接…

累积分布函数的一些性质证明

性质1&#xff1a; E [ X ] ∫ 0 ∞ ( 1 − F ( x ) ) d x − ∫ − ∞ 0 F ( x ) d x ( 1 ) E[X]\int_0^{\infty}(1-F(x))dx - \int_{-\infty}^0F(x)dx\quad (1) E[X]∫0∞​(1−F(x))dx−∫−∞0​F(x)dx(1) 证明&#xff1a; E [ X ] ∫ − ∞ ∞ x p ( x ) d x E[X] …