使用antd table 结合 limit offset 实现分页请求

可以使用antd table结合limit和offset来实现分页请求。首先，你需要在父组件中定义一个state来存储limit和offset的值，然后在表格中使用这些值来设置分页参数。接下来，你可以通过修改limit和offset的值来实现分页请求。

下面是一个示例代码：

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const MyTable = () => {
  const [limit, setLimit] = useState(10); // 每页显示的行数
  const [offset, setOffset] = useState(0); // 起始行数

  const [data, setData] = useState([]); // 表格数据
  const [total, setTotal] = useState(0); // 数据总数

  useEffect(() => {
    fetchData();
  }, [limit, offset]);

  const fetchData = () => {
    // 根据limit和offset发送分页请求
    // 例如：axios.get(`/api/data?limit=${limit}&offset=${offset}`)
    // 返回的数据包括data和total

    // 假设返回的数据格式如下：
    const response = {
      data: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Bob' },
      ],
      total: 100,
    };

    setData(response.data);
    setTotal(response.total);
  };

  const handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    const newOffset = (current - 1) * pageSize;
    setOffset(newOffset);
    setLimit(pageSize);
  };

  const columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: 'Name', dataIndex: 'name' },
  ];

  return (
    <Table
      dataSource={data}
      columns={columns}
      pagination={{
        total: total,
        defaultPageSize: limit,
        onChange: handleTableChange,
      }}
    />
  );
};

export default MyTable;

在上面的示例中，我们使用useState来定义limit和offset的初始值，并在useEffect中监听limit和offset的变化，当它们的值发生变化时，会触发fetchData函数发送分页请求。

在handleTableChange函数中，我们根据Antd Table的pagination对象中的current和pageSize来计算新的offset值，并更新limit和offset的状态。

最后，我们将数据和列配置传递给Table组件，并设置pagination属性来实现分页功能。在pagination属性中，我们设置total为总数据量，defaultPageSize为每页显示的行数，onChange为处理分页变化的函数handleTableChange。

这样，当用户在表格中切换页码或修改每页显示的行数时，会触发handleTableChange函数，从而更新limit和offset的值，并重新发送分页请求