一、问题的描述
使用分页,切换分页一直呈现第一页,达不到分页的效果
二、正常的预期是什么?
三、问题产生的原因分析
-
首先我们看下官方给的例子
-
request
是 ProTable 最重要的 API,request
会接收一个对象。对象中必须要有data
和success
,如果需要手动分页total
也是必需的。request
会接管loading
的设置,同时在查询表单查询和params
参数发生修改时重新执行。同时 查询表单的值和params
参数也会带入。以下是一个例子:
<ProTable<DataType, Params>
// params 是需要自带的参数
// 这个参数优先级更高,会覆盖查询表单的参数
params={params}
request={async (
// 第一个参数 params 查询表单和 params 参数的结合
// 第一个参数中一定会有 pageSize 和 current ,这两个参数是 antd 的规范
params: T & {
pageSize: number;
current: number;
},
sort,
filter,
) => {
// 这里需要返回一个 Promise,在返回之前你可以进行数据转化
// 如果需要转化参数可以在这里进行修改
const msg = await myQuery({
page: params.current,
pageSize: params.pageSize,
});
return {
data: msg.result,
// success 请返回 true,
// 不然 table 会停止解析数据,即使有数据
success: boolean,
// 不传会使用 data 的长度,如果是分页一定要传
total: number,
};
}}
/>
效果确实有自带分页的功能,但是当你切换分页后总保留在第一页,API也没有其他说明了
四、问题的解决方案
最后通过看源码,里面还有个分页的属性 pagination ,需要我们手动配置 pageSize,current。
所以 配置: pagination={{ pageSize: 10, current }}
而这个current 需要后台返回 ,然后保存起来 setCurrent(res.data.current);