React —— antd Table组件 分页Pagination

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

摘要生成于 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)
  })
}


https://www.cnblogs.com/jenifurs-blog/p/6020737.html

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值