Ant Design Table 分页请求: 使用 limit 和 offset 实现高效数据加载

可以使用 Ant Design 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 的值，并重新发送分页请求。