专栏首页菜鸟前端工程师react-开发经验分享-Table表格组件里自定义翻页方法

react-开发经验分享-Table表格组件里自定义翻页方法

ant框架里,Table表格组件里自定义翻页组件的方法 在Table表格组件里,自带了pagination翻页方法,不需要手动去写 但是 这个翻页是最基础的翻页 很多时候,开发需求需要更多的翻页功能 比如 输入页码数字跳转到对应页码 自定义每页展示多少条数据等等 这时就需要在Table里加上pagination的需求方法

// 需要注意的是,pagination接受的是object,所以需要使用双括号

onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize);
}

onChange(date, dateString) {
   console.log(date, dateString);
}

<Table 
     columns={this.columns}
     dataSource={ProjectData}
     rowSelection={rowSelection}
     scroll={{x: 2500}}
     bordered={true}
     pagination={{
       showSizeChanger: true, // 是否允许快速跳转至某页
       showQuickJumper: true, // 是否允许改变 pageSize
       onShowSizeChange: this.onShowSizeChange, // pageSize 变化的回调
       onChange: this.onChange, // 页码改变的回调,参数是改变后的页码及每页条数
    }}
/>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react-开发经验分享-Table表格组件里自定义翻页方法补充

    Mr. 柳上原
  • html+css学习笔记013-阿里图标0iframe

    Mr. 柳上原
  • html+css学习笔记009-定位

    Mr. 柳上原
  • AutoLink用户指南

    AutoLink采用 Apache License 2.0 国际许可协议 进行许可. 传播此文档时请注意遵循以上许可协议. 关于本许可证的更多详情可参考 htt...

    苦叶子
  • 前端之 CSS 知识点回顾

    <p>标签内的文字的颜色是red,优先级相等的时候与文件中样式定义的先后顺序有关,即是后面的覆盖前面的,与在class定义中的先后关系无关。

    IT技术小咖
  • UVALive-7500-Boxes and Balls

    ACM模版 描述 ? ? 题解 签到题,二分即可。 代码 #include <iostream> #include <cstdio> using namesp...

    f_zyj
  • 基于Innobackupex的完全恢复

        对于MySQL的完全恢复,我们可以借助于Innobackupex的多重备份加上binlog来将数据库恢复到故障点。这里的完全恢复是相对于时点恢复(也叫...

    Leshami
  • dotnet 设计规范 · 抽象类

    X 不要定义 public 或 protected internal 访问的构造函数。默认 C# 语言不提供抽象类的公开构造函数方法。

    林德熙
  • 源码分析 Sentinel 实时数据采集实现原理

    本篇将重点关注 Sentienl 实时数据收集,即 Sentienl 具体是如何收集调用信息,以此来判断是否需要触发限流或熔断。

    丁威
  • Appium运行原理与机制

    做测试开发的童鞋都知道,UI自动化你绕不开selenium, webdrvier, appium框架,那么这三者之间有什么关联,它们的原理是什么呢?

    赵云龙龙

扫码关注云+社区

领取腾讯云代金券