React —— antd Table组件分页Pagination

最新推荐文章于 2025-06-04 22:37:54 发布

vue初学者

最新推荐文章于 2025-06-04 22:37:54 发布

阅读量4.1w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41652466/article/details/80745940

本文介绍了一个使用表格组件实现分页功能的具体实例。通过设置每页显示的条目数量及响应式滚动高度，确保了良好的用户体验。代码示例中详细展示了如何通过状态管理更新当前页码并重新加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Table dataSource={this.state.tableDetailList}
       scroll={{ y: '200px' }}
       style={{tableLayout: 'fixed'}}
       pagination={{ pageSize: 12 }}
       columns={columns1}
       rowKey={record => record.restId}
       pagination={{  // 分页
         simple: true,
         current: this.state.current,
         total: this.state.total2,
         onChange: this.changePage,
       }}
/>

changePage = (page) => {
  this.setState({
    current: page,
  }, () => {
    let param = JSON.parse(JSON.stringify(this.state.param))
    param = {
      ...param,
      pageNum: this.state.current,
      pageSize: 10,
    }
    this.getActivityRestDetailList(param)
  })
}