使用antd table 实现前端分页

要使用antd table实现前端分页，首先需要安装并引入antd库。

安装antd：

npm install antd

在需要使用分页的组件中，引入antd的Table和Pagination组件：

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

在组件中定义表格的列和数据：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  // more data...
];

在组件中定义分页的状态：

const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10; // 每页显示的数据条数
const total = data.length; // 总数据条数

在组件中定义处理分页改变事件的函数：

const handlePageChange = (page) => {
  setCurrentPage(page);
};

在组件的render方法中使用Table和Pagination组件：

return (
  <div>
    <Table
      columns={columns}
      dataSource={data.slice((currentPage - 1) * pageSize, currentPage * pageSize)}
      pagination={false}
    />
    <Pagination
      current={currentPage}
      pageSize={pageSize}
      total={total}
      onChange={handlePageChange}
    />
  </div>
);

这样就实现了一个使用antd table实现的前端分页。注意在数据源中根据当前页和每页显示的数据条数来截取需要显示的数据。通过Pagination组件来处理分页的切换事件，并更新当前页的状态