1.先让默认每页只显示10条记录，在 组件上增加一个新属性，代码如下

    1. pagination={{
    2.           pageSize: 10,
    3.         }}

    保存，等前台编译完，刷新下登录日志页，发现默认每页只显示10条数据了，且分页正常没有问题。
    2.ProTable rowKey设置，ProTable 默认的rowKey为key，我们将其改为表的主键列属性infoId

    1.    <ProTable
    2.         headerTitle="查询表格"
    3.         actionRef={actionRef}
    4.         rowKey="infoId"

    3.序号列调整，现在序号列绑定的是数据库中的主键字段InfoId列值，而且由于数据是按创建时间倒序排列的,所以序号列的值也是倒序的，我们希望序号列显示的是从1开始的一个递增效果，可以在columns中用render自定义列的展示效果，我们先在columns数组中，序号列的位置上加上render函数来渲染列，这里我们让序号列的值显示为index+1,先看下效果

    1.   {
    2.       title: '序号',
    3.       dataIndex: 'infoId',
    4.       valueType: 'text',
    5.       hideInSearch: true,
    6.       render: (text, record, index) => {
    7.         return (
    8.        `${index+1}`
    9.         );
    10.       },
    11.     },

    image.png
    4.第一页是没有问题的，但是翻页后，不管是第几页，序号始终是重新从1开始的，这个就不符合我们的要求了，我们希望序号是根据页码变的，实际上可以用一个公式来计算序号，公式是
    (currentPage - 1) * pageSize + index + 1，公式中currentPage为当前页码，pageSize为每页显示数据条数，index为render方法参数index。公式是有了，问题是从哪里拿curreentPage和pageSize,怎么拿？
    5.网上没有找到有帮助的提示资料，只能从ProTable的帮助文档来寻找线索了
    image.png
    image.png
    从这两段文字中可以判断，request的params参数中可以拿到这两个参数，分别是 page: params.current, pageSize: params.pageSize,能拿到参数就好说了，我们可以直接用这两个参数直接在render中进行计算，由于涉及到翻页的动作，我们用useState来定义当前页和每页显示数据条数两个变量，并且在这两个参数有任何变动的地方，set下值。
    image.png

    1. const [currentPage, setCurrentPage] = useState(1);
    2. const [pageSize, setPageSize] = useState(10);

    currentPage初始值为1，pageSize初始值为10；
    6.修改request方法，增加设置currentPage和pageSize的两行代码，同时由于若依后台获取当前页码和每页数据大小的参数名分别为 pageNum,pageSize，调用后台接口时做下参数名改造，最后把request方法改成aync方法，改完后的request方法代码如下：
    image.png

    1.  request={ async (params ) => {
    2.           setCurrentPage(params.current);
    3.           setPageSize(params.pageSize);
    4.          const  serverParams={
    5.             ...params,
    6.             pageNum:params.current,
    7.             pageSize:params.pageSize,
    8.           }
    9.         const res=  await   loginfo(serverParams);
    10.             const result = {
    11.               data: res.rows,
    12.               total: res.total,
    13.               success: true,
    14.             };
    15.             return result;
    16.         }}

    7.返回修改序号列里面的render方法，修改后的render方法代码如下

    1.     render: (text, record, index) => {     
    2.         return (        
    3.           <span>{(currentPage - 1) * pageSize + index + 1}</span>
    4.         );
    5.       },

    8.保存前端代码，等编译后刷新登录日志页面，这时候再翻页，看序号列，一切基本满足我们的要求
    image.png