Antd ProTable 如何设置不分页，依然显示分页信息，前端分页不触发request？

Question

Antd ProTable 如何设置不分页，依然显示分页信息，前端分页不触发request？

ProTable 设置了request，pagination，前端分页，不触发request，但实际上确实每一次切换分页还是触发了request，如何设置呢

Answer 1

要在 Antd ProTable 中实现不分页但依然显示分页信息，并且确保前端分页不触发 request，可以尝试以下方法：
1.设置 pagination 属性：
确保 pagination 属性设置为 true，并且配置 pageSize 和 current。
使用 onChange 事件来处理分页逻辑，而不是依赖 request。
2.禁用 request 的分页触发：
在 request 方法中，检查 params 的变化，避免在分页切换时触发新的请求。

以下是一个示例代码：

import React, { useState } from 'react';
import ProTable from '@ant-design/pro-table';

const MyProTable = () => {
  const [dataSource, setDataSource] = useState([]);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });

  const handleTableChange = (pagination) => {
    setPagination(pagination);
  };

  return (
    <ProTable
      columns={[
        { title: 'Name', dataIndex: 'name' },
        { title: 'Age', dataIndex: 'age' },
      ]}
      dataSource={dataSource}
      pagination={{
        ...pagination,
        onChange: handleTableChange,
      }}
      request={async (params) => {
        // 根据需要处理请求逻辑
        // 例如：if (params.current !== pagination.current) return;
        return { data: dataSource, success: true };
      }}
    />
  );
};

export default MyProTable;

在这个示例中：

• pagination 属性配置了 current 和 pageSize，并且通过 onChange 事件来处理分页逻辑。
• request 方法中添加了条件判断，避免在分页切换时触发新的请求。

这样可以确保分页信息显示在前端，但不会在每次切换分页时触发新的请求。