当前位置: 首页 > news >正文

【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.lryc.cn/news/391889.html

相关文章:

  • 400G SR4和800G SR8光模块在AI集群中的应用
  • ARM功耗管理软件之DVFSAVS
  • 【堆 优先队列】23. 合并 K 个升序链表
  • 云桌面运维工程师
  • AGI 之 【Hugging Face】 的【Transformer】的 [ Transformer 架构 ] / [ 编码器 ]的简单整理
  • 【在大模型RAG系统中应用知识图谱】
  • 第二十条:与抽象类相比,优先选择接口
  • 20240705
  • 【2023ICPC网络赛I 】E. Magical Pair
  • Kafka-服务端-网络层-源码流程
  • 百日筑基第十一天-看看SpringBoot
  • Generative Modeling by Estimating Gradients of the Data Distribution
  • vector与list的简单介绍
  • 四种线程池的使用,优缺点分析
  • 什么是 BEM 规范
  • 【Node.JS】入门
  • Amazon SageMaker 机器学习之旅的助推器
  • TransMIL:基于Transformer的多实例学习
  • 3.用户程序与驱动交互
  • 尽量不写一行if...elseif...写出高质量可持续迭代的项目代码
  • xcrun: error: unable to find utility “simctl“, not a developer tool or in PATH
  • 【linux高级IO(一)】理解五种IO模型
  • 前端引用vue/element/echarts资源等引用方法Blob下载HTML
  • 昇思MindSpore学习笔记2-01 LLM原理和实践 --基于 MindSpore 实现 BERT 对话情绪识别
  • uniapp实现图片懒加载 封装组件
  • 持续交付:自动化测试与发布流程的变革
  • VBA常用的字符串内置函数
  • 大数据面试题之Spark(7)
  • AI绘画 Stable Diffusion图像的脸部细节控制——采样器全解析
  • liunx离线安装Firefox