专栏首页菜鸟前端工程师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. 柳上原
  • react-开发经验分享-Table表格组件里自定义表格td内容换行

    Mr. 柳上原
  • react-开发经验分享-Table表格组件里跳转页面及传递数据

    Mr. 柳上原
  • react-开发经验分享-自定义封装请求方法(一)

    Mr. 柳上原
  • react-开发经验分享-自定义封装请求方法(二)

    Mr. 柳上原
  • React同构思想

    React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想。

    IMWeb前端团队
  • React 同构思想

    React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想。

    腾讯IVWEB团队
  • React同构思想

    React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想。 出于篇幅原因,本文不会介绍React基础,所...

    IMWeb前端团队
  • 前端元编程——使用注解加速你的前端开发

    导语 前端元编程大幅减少CRUD样板代码,释放生产力,极速前端开发 ? 无论你用React,Vue,还是Angular,你还是要一遍一遍写相似的CRUD 页面...

    腾讯VTeam技术团队

扫码关注云+社区

领取腾讯云代金券