Ant Design 带分页表格组件实现教程

在 Ant Design 中，可以使用Table组件和Pagination组件来实现带分页的表格。

首先，需要引入Table和Pagination组件：

import { Table, Pagination } from 'antd';

然后，需要定义表格的数据和列信息，并设置分页相关的属性：

const columns = [
  // 列信息
];

const data = [
  // 表格数据
];

const pagination = {
  // 分页属性
};

接下来，在组件中使用Table和Pagination组件来渲染表格和分页器：

const App = () => {
  return (
    <div>
      <Table columns={columns} dataSource={data} pagination={false} />
      <Pagination {...pagination} />
    </div>
  );
};

在上面的代码中，Table组件的columns属性用于设置表格的列信息，dataSource属性用于设置表格的数据，pagination属性设置为false表示不显示表格的分页器。

Pagination组件使用{...pagination}语法将pagination对象的属性传递给Pagination组件，可以根据需要设置分页的属性，例如total表示总数据量，pageSize表示每页显示的数据量，current表示当前页码等。

最后，将App组件渲染到页面中即可：

ReactDOM.render(<App />, document.getElementById('root'));

完整的示例代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Pagination } from 'antd';

const columns = [
  // 列信息
];

const data = [
  // 表格数据
];

const pagination = {
  total: 50,
  pageSize: 10,
  current: 1,
  onChange: (page) => {
    console.log(page);
  },
};

const App = () => {
  return (
    <div>
      <Table columns={columns} dataSource={data} pagination={false} />
      <Pagination {...pagination} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

通过以上代码，就可以实现一个带分页的表格组件。你可以根据实际需求来自定义表格的列信息、数据和分页属性。