antd 中设置前端分页

在 antd 中设置前端分页，可以使用 Table 组件的 pagination 属性。具体步骤如下：

1. 在 Table 组件中设置 dataSource 属性为数据数组，columns 属性为表格列的配置数组。

2. 设置 pagination 属性为一个对象，该对象包含以下属性：

- current：当前页码，默认为 1。
- pageSize：每页显示的数量，默认为 10。
- total：总数据量，用于计算页数。
- onChange：页码改变的回调函数，可以在该函数中更新当前页码。

示例代码：

import { Table } from 'antd';

const dataSource = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 20 },
  { id: 3, name: '王五', age: 22 },
  // ...
];

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  // ...
];

function MyTable() {
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: dataSource.length,
    onChange: (page) => {
      setPagination({ ...pagination, current: page });
    },
  });

  const start = (pagination.current - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  const displayedData = dataSource.slice(start, end);

  return (
    <Table
      dataSource={displayedData}
      columns={columns}
      pagination={pagination}
    />
  );
}

在上面的示例中，我们使用 useState 来保存 pagination 对象，并根据当前页码和每页显示的数量来计算需要显示的数据。在 Table 组件中，我们将 dataSource 设置为 displayedData，也就是经过分页后的数据，pagination 设置为我们保存的 pagination 对象。当页码改变时，我们更新 current 属性，并重新计算需要显示的数据。