📌 MyPagination 组件使用文档 📖 组件介绍 MyPagination 是一个基于 Ant Design 的分页组件，支持：

自定义分页大小（pageSizeOptions） 显示总条数（showTotal） 分页变更回调（onChange） 自定义样式（style） 该组件封装了 antd 的 Pagination 组件，使分页功能更直观，适用于表格、列表等数据展示场景。

🚀 安装

1. 直接安装 npm 包

npm install my-pagination-component

或者使用 yarn：

yarn add my-pagination-component

2. 安装 antd 依赖

npm install antd

🛠 组件使用 📌 基本用法

import React, { useState } from 'react';
import { MyPagination } from 'my-pagination-component';

const Demo = () => {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(20);

  const handlePageChange = (page: number, size: number) => {
    setCurrent(page);
    setPageSize(size);
  };

  return (
    <MyPagination
      current={current}
      pageSize={pageSize}
      total={500} // 数据总数
      onChange={handlePageChange}
      pageSizeOptions={[10, 20, 50]} // 可选分页大小
    />
  );
};

export default Demo;

🔧 API 📌 组件参数

属性 | 说明 | 类型 | 默认值 ---|---|---|--- current | 当前页码 | number | 1 pageSize | 每页条数 | number | 20 total | 数据总条数 | number | 0 onChange | 页码或 pageSize 变化回调 | (page: number, pageSize: number) => void | - pageSizeOptions | 可选分页大小选项 | number[] | [20, 50, 100] style | 自定义 CSS 样式 | React.CSSProperties | {}

📌 进阶用法 1️⃣ 配合表格使用 通常在 Table 组件中，分页与数据展示结合使用：

import React, { useState } from 'react';
import { Table } from 'antd';
import { MyPagination } from 'my-pagination-component';

const Demo = () => {
  const [data, setData] = useState(
    Array.from({ length: 100 }).map((_, i) => ({ key: i, name: `用户${i + 1}` }))
  );
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handlePageChange = (page: number, size: number) => {
    setCurrent(page);
    setPageSize(size);
  };

  return (
    <div>
      <Table
        columns={[{ title: '姓名', dataIndex: 'name' }]}
        dataSource={data.slice((current - 1) * pageSize, current * pageSize)}
        pagination={false}
      />
      <MyPagination
        current={current}
        pageSize={pageSize}
        total={data.length}
        onChange={handlePageChange}
      />
    </div>
  );
};

export default Demo;

2️⃣ 自定义分页样式 可以使用 style 传入自定义样式：

<MyPagination
 current={1}
 pageSize={20}
 total={200}
 onChange={(page, size) => console.log(page, size)}
 style={{ marginTop: '30px', background: '#f5f5f5', padding: '10px', borderRadius: '5px' }}
/>

🛠 注意事项 total 需要传入数据总条数，否则分页不会生效。 pageSizeOptions 需要是 number[]，否则可能导致 antd 组件异常。 onChange 需要传递处理函数，否则分页变化不会生效。