实现步骤
- 为Table组件指定pagination属性来展示分页效果
- 在分页切换事件中获取到筛选表单中选中的数据
- 使用当前页数据修改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
}} />
)
相关属性