1.先让默认每页只显示10条记录，在 组件上增加一个新属性，代码如下
pagination={{
pageSize: 10,
}}
保存，等前台编译完，刷新下登录日志页，发现默认每页只显示10条数据了，且分页正常没有问题。
2.ProTable rowKey设置，ProTable 默认的rowKey为key，我们将其改为表的主键列属性infoId
<ProTable
headerTitle="查询表格"
actionRef={actionRef}
rowKey="infoId"
3.序号列调整，现在序号列绑定的是数据库中的主键字段InfoId列值，而且由于数据是按创建时间倒序排列的,所以序号列的值也是倒序的，我们希望序号列显示的是从1开始的一个递增效果，可以在columns中用render自定义列的展示效果，我们先在columns数组中，序号列的位置上加上render函数来渲染列，这里我们让序号列的值显示为index+1,先看下效果
{
title: '序号',
dataIndex: 'infoId',
valueType: 'text',
hideInSearch: true,
render: (text, record, index) => {
return (
`${index+1}`
);
},
},
4.第一页是没有问题的，但是翻页后，不管是第几页，序号始终是重新从1开始的，这个就不符合我们的要求了，我们希望序号是根据页码变的，实际上可以用一个公式来计算序号，公式是 (currentPage - 1) * pageSize + index + 1，公式中currentPage为当前页码，pageSize为每页显示数据条数，index为render方法参数index。公式是有了，问题是从哪里拿curreentPage和pageSize,怎么拿？
5.网上没有找到有帮助的提示资料，只能从ProTable的帮助文档来寻找线索了
从这两段文字中可以判断，request的params参数中可以拿到这两个参数，分别是 page: params.current, pageSize: params.pageSize,能拿到参数就好说了，我们可以直接用这两个参数直接在render中进行计算，由于涉及到翻页的动作，我们用useState来定义当前页和每页显示数据条数两个变量，并且在这两个参数有任何变动的地方，set下值。
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
currentPage初始值为1，pageSize初始值为10；
6.修改request方法，增加设置currentPage和pageSize的两行代码，同时由于若依后台获取当前页码和每页数据大小的参数名分别为 pageNum,pageSize，调用后台接口时做下参数名改造，最后把request方法改成aync方法，改完后的request方法代码如下：
request={ async (params ) => {
setCurrentPage(params.current);
setPageSize(params.pageSize);
const serverParams={
...params,
pageNum:params.current,
pageSize:params.pageSize,
}
const res= await loginfo(serverParams);
const result = {
data: res.rows,
total: res.total,
success: true,
};
return result;
}}
7.返回修改序号列里面的render方法，修改后的render方法代码如下
render: (text, record, index) => {
return (
<span>{(currentPage - 1) * pageSize + index + 1}</span>
);
},
8.保存前端代码，等编译后刷新登录日志页面，这时候再翻页，看序号列，一切基本满足我们的要求
最近做了个小API应用，希望大家关注支持下: www.yuque.com/docs/share/…
