Ant Design Pagination 分页组件问题

因为 Ant Design Pagination 分页组件不满足业务需求，所以进行了改造，改造 Ant Design Pagination 分页组件时发现了一个问题，total 数据总数的配置显示有问题，被/10取整了。最新版本 v5.19.0 也有问题，已经将问题提到官方 Issues 了，看他们的处理了

项目上使用 Ant Design 的分页组件为：Pagination，但是不满足业务需求，只能进行改造了。

1. 改造前

改造前：使用最简单的翻页组件，即配置simple属性，只有当前页、总页码、上一页和下一页几个功能。

// 导入组件
import { Pagination, PaginationProps } from "antd";
// 使用组件
<Pagination simple defaultCurrent={2} total={50} />;

效果如下图所示：

2. 改造后

改造后：在最简单的翻页simple的基础上，增加了第一页和最后一页的功能（虽然不知道为啥要加这个，但既然提了，还是得做呀），而且自定义了页码的结构itemRender，更改按钮样式

// 导入组件
import { Pagination, PaginationProps } from "antd";
// 导入图片
import icPageFirst from "@assets/img/ic_page_first.png";
import icPagePrev from "@assets/img/ic_page_prev.png";

// 自定义页码结构
const itemRender: PaginationProps["itemRender"] = (_, type, originalEle) => {
  // 上一页样式
  if (type === "prev") {
    return <img src={icPagePrev} alt="上一页" />;
  }
  // 下一页样式
  if (type === "next") {
    return <img src={icPagePrev} alt="下一页" className="trans" />;
  }
  return originalEle;
};

// 页码或 pageSize 改变的回调，参数是改变后的页码(page)及每页条数(pageSize)
const onChange: PaginationProps["onChange"] = (page) => {
  setCurrent(page);
};

<div className="pp_page">
  {/* 增加第一页按钮及事件 */}
  <img src={icPageFirst} alt="第一页" onClick={() => onChange(1, pageSize)} />
  <Pagination
    simple
    itemRender={itemRender}
    total={total}
    current={current}
    onChange={onChange}
    // showTotal={(total) => `Total ${total} items`}
  />
  {/* 增加最后一个按钮及事件 */}
  <img
    src={icPageFirst}
    alt="最后一页"
    className="trans"
    // 直接借助onChange实现
    onClick={() => onChange(total, pageSize)}
  />
</div>;

实现效果如下图所示：

3. 发现问题

然后就发现了Pagination组件一个问题，total设置为变量时，显示不生效；设置为常量如total={10}才会生效

加了showTotal之后，发现 total 其实是有用的，只是显示的时候有问题，那就是Pagination组件的问题了，很无语。。。。。。（我的 Ant Design 版本是 v5.16.5）

4. 排查问题

当前的最新版本为 v5.19.0，我以为是版本的问题，就进行了升级

然后发现升级到最新版本也是一样的问题，使用变量就不生效；更无语的是，使用常量total={10}也不生效了，离谱。。。。。。我也是服气了。

估计是 Pagination 组件总是和 List、Table 组件连用，很少单独使用吧，这么简单的问题竟然没发现。

查了一下，分页组件使用的是"rc-pagination": "~4.2.0",

最后经过一番测试，发现不是使用常量total={xx}不是没生效，而是total值被改变了

测试代码以及测试结果，如下图所示：

发现结果变成 total/10 了，而且向上取整了（确实是bug了）；pageSize 切换器还突然跑出来了（后来查了一下官网，发现官网说明：showSizeChanger：是否展示 pageSize 切换器，当 total 大于 50 时默认为 true , 那这个就是正常的了，不是bug）

这个确实是一直存在的问题，我把这个提到官方 Issues 了，等待处理吧