ant-design Table 关闭分页完全指南使用pagination{false}让表格完整展示数据【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design在 ant-design 的 Table 组件中分页是默认行为——只要dataSource传入的数据量超过默认每页条数表格就会自动截断展示。但在管理后台的详情列表、配置预览、对话框内的小型表格等场景中我们往往希望数据一次性全部展示此时只需传入pagination{false}即可彻底关闭分页。本文基于 ant-design 仓库中的 components/table/demo/nopagination.md 官方示例展开结合 components/table/index.jsx 源码深入讲解关闭分页的正确姿势、底层实现原理以及它与其他表格特性的协同方式读完即可在实际项目中直接落地。什么时候需要关闭分页官方 Table 文档 components/table/index.md 给出的使用建议是当有大量结构化数据需要展现或需要对数据进行排序、搜索、分页、自定义操作等复杂行为时使用 Table。但在以下情况分页反而会成为累赘数据量固定且有限例如配置项列表、权限清单、成员名册数据只有几条到几十条分页器占用空间且无意义需要全量对照/导出运营或审核场景需要一眼看到所有行翻页会打断比对嵌入式小表格对话框、抽屉、卡片内嵌表格空间有限应把空间留给数据本身数据已由服务端裁剪后端已按条件返回完整结果集前端无需再做分页截断。此时pagination{false}就是官方推荐的关闭方式。在 nopagination 示例中3 条数据一次性完整渲染没有任何分页器出现。基础用法一行代码关闭分页官方示例 components/table/demo/nopagination.md 给出了最小可运行代码核心只有一处给 Table 传入pagination{false}。import { Table } from antd; const columns [{ title: 姓名, dataIndex: name }, { title: 年龄, dataIndex: age }, { title: 住址, dataIndex: address }]; const data [{ key: 1, name: 胡彦斌, age: 32, address: 西湖区湖底公园1号 }, { key: 2, name: 胡彦祖, age: 42, address: 西湖区湖底公园1号 }, { key: 3, name: 李大嘴, age: 32, address: 西湖区湖底公园1号 }]; ReactDOM.render(Table columns{columns} dataSource{data} pagination{false} / , mountNode);要点说明columns中的每项由title列头文字和dataIndex列数据在数据项中对应的 key组成与dataSource中的字段一一对应dataSource中每个数据对象都必须提供key字段作为行的唯一标识详见下文注意事项与 components/table/demo/paging.md 中传入分页配置对象pagination{{...}}不同这里传入布尔值false语义为完全禁用分页能力。从 API 文档来看pagination参数的定义正是分页器配置项参考 pagination 组件设为 false 时不显示分页见 components/table/index.md 的 Table API 表格。传入false是官方明确支持的取值。源码剖析pagination{false}在底层发生了什么关闭分页并不是简单地隐藏分页器而是从数据切片、状态初始化和渲染三个阶段同时生效。阅读 components/table/index.jsx 可以完整还原这一过程。1. 判定入口hasPagination()组件通过一个统一的判定函数来决定是否启用分页components/table/index.jsxhasPagination() { return this.props.pagination ! false; },这是整个关闭逻辑的总开关只要pagination不等于false即缺省或传入了配置对象就认为需要分页。2. 初始化不产生分页状态在getInitialState()中components/table/index.jsx组件会根据hasPagination()决定是否初始化分页状态pagination: this.hasPagination() ? objectAssign({ size: this.props.size, }, defaultPagination, this.props.pagination) : {},当传入pagination{false}时分页状态被初始化为空对象{}不会混入默认分页配置。默认分页配置定义在同文件顶部components/table/index.jsxconst defaultPagination { pageSize: 10, current: 1, onChange: noop, onShowSizeChange: noop, };也就是说默认情况下 Table 每页展示 10 条数据pageSize: 10这也是为什么数据超过 10 条时表格会自动分页的原因。关闭分页后这个默认的 10 条上限被彻底绕过。3. 数据切片pageSize 放大到最大值getCurrentPageData()是数据渲染前的最后一道关卡components/table/index.jsx它决定当前页实际渲染哪些行getCurrentPageData() { let data this.getLocalData(); let current; let pageSize; let state this.state; // 如果没有分页的话默认全部展示 if (!this.hasPagination()) { pageSize Number.MAX_VALUE; current 1; } else { pageSize state.pagination.pageSize; current state.pagination.current; } // 分页 // --- // 当数据量少于等于每页数量时直接设置数据 // 否则进行读取分页数据 if (data.length pageSize || pageSize Number.MAX_VALUE) { data data.filter((item, i) { return i (current - 1) * pageSize i current * pageSize; }); } return data; }关键逻辑清晰可见关闭分页时pageSize被赋值为Number.MAX_VALUEJavaScript 能表示的最大数值current固定为 1切片过滤条件i (current - 1) * pageSize i current * pageSize在pageSize Number.MAX_VALUE时等价于i 0 i 无穷大即全部数据都通过过滤注释直接写明如果没有分页的话默认全部展示。因此无论dataSource中有多少条数据都会被完整交给底层的 rc-table 渲染不会发生任何截断。4. 渲染阶段分页器返回 nullrenderPagination()是分页器 DOM 的出口components/table/index.jsxrenderPagination() { // 强制不需要分页 if (!this.hasPagination()) { return null; } ... return (total 0) ? Pagination {...this.state.pagination} className{classString} onChange{this.handlePageChange} total{total} pageSize{pageSize} onShowSizeChange{this.handleShowSizeChange} / : null; }当pagination{false}时函数在第一行就直接return null根本不会渲染分页器组件——这不是用 CSS 隐藏而是从 DOM 层面彻底移除。反观开启分页时表格底部会渲染ant-table-pagination分页器该分页器由 components/pagination/index.jsx 对 rc-pagination 封装而来其样式定义在 style/components/table.less.{table-prefix-cls}-pagination { margin: 16px 0; float: right; }关闭分页后这段样式对应的 DOM 不存在也就不会有这 16px 的上边距和右浮动布局。关闭分页后的视觉与布局细节loading 状态的间距修正pagination{false}还会影响表格加载中loading状态下 Spin 加载指示器的定位。在render()方法中components/table/index.jsx组件会根据分页状态为 Spin 容器选择不同的类名const paginationPatchClass (this.hasPagination() data data.length ! 0) ? ant-table-with-pagination : ant-table-without-pagination;对应的样式在 style/components/table.less.{table-prefix-cls}-with-pagination { margin-top: -20px; } .{table-prefix-cls}-without-pagination { margin-top: 10px; }因为开启分页时表格底部多出一块分页器区域加载指示器需要上移 20px 来抵消关闭分页后没有这块区域则改为下移 10px。两者 margin 方向相反正是为了在不同分页状态下让 Spin 始终垂直居中于表格区域。从源码结构看这保证了关闭分页后加载动画的定位依然精准。完整展示 vs 每页 10 条对比两个官方 demo 可以直观感受差异components/table/demo/nopagination.md3 条数据无分页器全部渲染components/table/demo/paging.md用循环生成 46 条数据for (let i 0; i 46; i)传入分页配置对象展示分页器并可通过showSizeChanger: true切换每页条数。在 paging 示例中onChange与onShowSizeChange回调分别打印当前页码和页码/页大小而关闭分页后这两类回调将永远不会触发因为分页器不存在handlePageChange也不会被调用。如果你的业务逻辑依赖分页回调收集数据关闭分页后需要改为直接使用完整dataSource。关闭分页后与其他特性的协同关闭分页只影响分页能力Table 的其他能力全部照常工作。以官方其他 demo 为参照行选择rowSelection参考 components/table/demo/row-selection.mdrowSelection的选中逻辑基于当前页数据getFlatCurrentPageData()。关闭分页后当前页即全部数据因此全选就等同于选择整个数据集onChange(selectedRowKeys, selectedRows)返回的行数组是完整列表——这在需要一次性批量操作的场景下反而更符合直觉排序与筛选参考 components/table/index.jsx 的getLocalData()本地排序column.sorter与筛选column.filters/onFilter在分页之前执行作用于完整dataSource。关闭分页后排序、筛选结果直接呈现在当前全部行上无需翻页确认紧凑尺寸参考 components/table/demo/size.mdsizemiddle或sizesmall与pagination{false}组合非常适合空间有限的对话框内表格边框与表头bordered、showHeader、useFixedHeader等参数见 components/table/index.md API 表均不受影响。注意事项务必提供行 key官方文档 components/table/index.md 强调dataSource中的每条数据默认以key属性作为唯一标识。若数据没有key字段必须通过rowKey指定否则组件会退化为按索引取值见 components/table/index.jsx 的getRecordKey并可能出现各类奇怪错误// 比如你的数据主键是 uid return Table rowKey{record record.uid} pagination{false} /;受控与非受控分页状态当pagination不是false而是配置对象时组件会在componentWillReceiveProps中合并分页状态components/table/index.jsx。传入false则完全跳过该合并逻辑这也是关闭与配置两条路径在源码中的明确分界。数据量极小时分页器自动隐藏即使不显式传入pagination{false}renderPagination()中的total 0判断与getCurrentPageData()的切片逻辑也会让数据少于每页条数时不显示多余分页。但这只适用于少量数据一旦数据超过 10 条默认pageSize分页器就会出现。若要确保任何数据量下都完整展示显式传入pagination{false}是唯一可靠的方式。onChange 回调的参数Table 的onChange(pagination, filters, sorter)在分页、排序、筛选变化时触发components/table/index.jsx。关闭分页后分页变化不再可能发生但排序、筛选变化仍会触发回调此时第一个参数pagination为空对象{}实现代码应对此有所容错。小结pagination{false}是 ant-design Table 关闭分页的官方标准写法其背后是hasPagination()判定、空分页状态初始化、pageSize Number.MAX_VALUE全量切片、renderPagination()返回 null 这四层机制的协同。它适用于数据量固定、需要全量展示或空间受限的表格场景且与行选择、排序、筛选、紧凑尺寸等特性天然兼容。相关代码与示例均可直接在仓库中查阅官方示例components/table/demo/nopagination.md组件实现components/table/index.jsx分页组件封装components/pagination/index.jsx表格样式style/components/table.less分页对照示例components/table/demo/paging.md【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考