Ant Design Pagination 的 showTotal展示数据总量与当前范围的完整实践【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design本文围绕 Ant Design 官方示例 showTotal 文档 展开通过showTotal配置项在 Pagination 分页器上展示数据总量与当前页的数据范围。读完后你将掌握showTotal的函数签名、total/range两个参数的准确含义、其在 simple 模式与 Table 分页场景下的行为以及从 Pagination 源码 看该属性如何透传到底层rc-component/pagination的渲染链路。showTotal 的官方定义官方示例文档 total.md 给出的核心结论只有一句话通过设置showTotal展示总共有多少数据You can show the total number of data by settingshowTotal。结合 Pagination 组件 API 文档 的参数表这一能力的完整定义为参数说明类型默认值全局配置showTotal用于显示数据总量和当前数据顺序function(total, range)-×total数据总数number0×defaultPageSize默认的每页条数number10×defaultCurrent默认的当前页数number1×三个要点需要注意showTotal的类型是一个回调函数而非字符串模板因此返回内容可以是任意ReactNode文本、带样式的节点等回调接收两个参数total数据总数与range当前页的数据范围形如[起始序号, 结束序号]的数组该属性不支持全局配置参数表中“全局配置”一列为×只能通过组件属性传入无法经ConfigProvider的pagination配置统一注入。官方示例完整拆解官方示例代码位于 total.tsx同时演示了两种典型写法import React from react; import { Pagination } from antd; const App: React.FC () ( {/* 写法一只展示总量 */} Pagination total{85} showTotal{(total) Total ${total} items} defaultPageSize{20} defaultCurrent{1} / br / {/* 写法二展示当前页数据范围 总量 */} Pagination total{85} showTotal{(total, range) ${range[0]}-${range[1]} of ${total} items} defaultPageSize{20} defaultCurrent{1} / / ); export default App;写法一showTotal{(total) Total ${total} items只取第一个参数total渲染结果恒为Total 85 items不随翻页变化适合“仅告知数据规模”的场景写法二showTotal{(total, range) ${range[0]}-${range[1]} of ${total} items取第二个参数range展示当前页起止序号。以示例中的total{85}、defaultPageSize{20}为例第 1 页渲染1-20 of 85 items第 4 页末尾页仅 5 条渲染61-85 of 85 items。两个示例均显式设置total{85}、defaultPageSize{20}、defaultCurrent{1}这是无受控状态时演示range取值的必要前提range完全由total、当前页码与每页条数三者推导而来。参数取值行为与边界情况range的精确取值可以从仓库测试中得到验证。simple 模式测试 断言了Pagination simple total{100} showTotal{(total: number, range: number[]) ${range[0]}-${range[1]} of ${total} items} / // 断言 .ant-pagination-total-text 文本为 1-10 of 100 items由此可以确认两点行为事实showTotal在simple简单分页模式下同样生效文本挂载在ant-pagination-total-text这个语义类名节点上可据此做样式定制或测试定位第 1 页、每页 10 条时range为[1, 10]即range[0] (当前页 - 1) * pageSize 1、range[1]为当前页实际数据条数对应的结束序号不超过total。从源码结构看这一推导逻辑由底层rc-component/pagination完成——Pagination.tsx 并未自行处理showTotal而是将其包含在restProps中整体透传给RcPagination。源码中的透传链路与国际化从 Pagination.tsx 的源码结构看Ant Design 的Pagination是对rc-component/pagination的封装层PaginationProps声明为extends OmitRcPaginationProps, showSizeChanger | pageSizeOptions | classNames | styles | sizeChangerRender见 Pagination.tsx 第 44-48 行showTotal等基础分页属性直接继承自底层类型未被重定义组件函数体内只解构出align、size、showSizeChanger等需要增强处理的属性showTotal留在restProps中最终经RcPagination {...restProps} locale{locale} ... /渲染见 第 304-320 行同一渲染语句中合并的locale来自useLocale(Pagination, enUS)与用户locale属性的合并因此showTotal回调内如需展示“第 X 条 / 共 Y 条”这类本地化文案推荐在回调中引用 locale 文案而不是写死字符串。仓库的设计稿示例 design/demo/total.tsx 正是这种写法const locales { cn: { total: (total: number, current: string | number) 第 ${current} 条 / 共 ${total} 条 }, en: { total: (total: number, current: string | number) ${current} of ${total} items }, }; Pagination defaultCurrent{3} total{500} showQuickJumper showTotal{(total, range) locale.total(total, range.join(-))} /该写法将range用join(-)拼成区间字符串后交给 locale 文案函数中英文站点各自呈现“第 41-50 条 / 共 500 条”与41-50 of 500 items是国际化项目中的推荐模式。与 Table 分页的组合使用showTotal同样适用于 Table 的内嵌分页。Table 分页测试 中有一个“showTotal被移除后应隐藏”的回归用例约第 602 行// 先渲染 pagination{{ showTotal: (t) ${t} }}再将其移除 it(showTotal should hide when removed, () { ... });这说明两点实战结论其一Table 的pagination属性完整透传Pagination的分页能力showTotal可直接写在pagination对象中其二showTotal的存在与否会影响 DOM有则渲染ant-pagination-total-text节点移除后节点消失做动态切换时不会有残留节点可以放心按条件传入。小结showTotal是function(total, range)签名的回调total为数据总数range为当前页[起始序号, 结束序号]只关心总量时忽略range即可需要“第 X-Y 条 / 共 Z 条”文案时引用range[0]、range[1]该属性在 simple 模式、Table 内嵌分页下均可用文本节点类名为ant-pagination-total-text且不支持ConfigProvider全局配置底层计算由rc-component/pagination承担Ant Design 层负责透传与 locale 合并见 Pagination.tsx因此自定义文案请通过回调返回值或 locale 完成无需触碰 DOM。相关仓库入口示例 components/pagination/demo/total.tsx、组件 API 文档 components/pagination/index.zh-CN.md、组件实现 components/pagination/Pagination.tsx。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考