如何自定义antd的分页？答案

【问题标题】：How can I customize pagination of antd?如何自定义antd的分页？
【发布时间】：2022-11-06 16:33:02
【问题描述】：

我正在使用 antd 向表格添加分页。这是以下代码

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    width: 150
  },
  {
    title: "Age",
    dataIndex: "age",
    width: 150
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`
  });
}
const App = () => (
  <Table
    columns={columns}
    dataSource={data}
    pagination={{
      pageSizeOptions: [5, 10, 15, 20],
      defaultPageSize: 5
    }}
  />
);

我希望将 5 人/页（如附图所示）定制为 5 人/页。 5/page 是默认出现的，但我如何根据我的要求自定义它？我检查了分页的属性，但我不知道该怎么做。

【问题讨论】：

标签： javascript node.js reactjs pagination antd

【解决方案1】：

您可以编写自己的分页组件并根据需要对其进行自定义，并在<Table>组件之后进行渲染，像这样的东西：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Pagination } from "antd";

const MyPagination = ({ total, onChange }) => {
    return (
      <div style={{ display: "flex" }}>
        <Pagination total={total} />
        <select style={{ marginLeft: 5 }} onChange={onChange}>
          <option value="1" selected>1 people</option>
          <option value="10">10 people</option>
          <option value="50">50 people</option>
        </select>
      </div>
    );
}

ReactDOM.render(<MyPagination total={50} onChange={(e) => console.log(e.target.value) }/>, document.getElementById("container"));

【讨论】：