antd-protable的分页逻辑封装

在Ant Design Pro Table中，分页逻辑可以通过pagination属性进行配置。你可以将分页逻辑封装在一个自定义的React组件中，并在需要分页的地方使用这个组件。

以下是一个简单的PaginationWrapper组件的示例代码，用于封装分页逻辑：

import React, { useState } from 'react';
import { ProTable } from '@ant-design/pro-table';
 
const PaginationWrapper = ({ tableProps }) => {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
 
  const handleTableChange = (pagination, _, snapshot) => {
    setCurrent(pagination.current);
    setPageSize(pagination.pageSize);
  };
 
  return (
    <ProTable
      {...tableProps}
      pagination={{
        current,
        pageSize,
        onChange: handleTableChange,
      }}
    />
  );
};
 
export default PaginationWrapper;

在上述代码中，PaginationWrapper组件使用了React的useState钩子来管理当前页和每页条目数。handleTableChange函数会在分页事件发生时被调用，并更新状态。在ProTable组件中，我们将封装好的状态作为pagination属性传入，从而实现分页的控制。

使用PaginationWrapper组件的方式如下：

import PaginationWrapper from './PaginationWrapper';
 
const MyTable = () => {
  const tableProps = {
    // ... 其他ProTable属性
  };
 
  return <PaginationWrapper tableProps={tableProps} />;
};

在这个例子中，PaginationWrapper组件接收一个tableProps属性，该属性包含了所有传递给ProTable组件的属性，同时PaginationWrapper内部处理分页逻辑。这样，你可以在多个表格中重用分页逻辑，而不需要在每个表格中都写一遍分页的代码。