Ant-Design Table技术问题：如何禁用分页并展示全部记录？

嗨，我来帮你搞定这个问题！在Ant-Design的Table组件里禁用分页、显示所有记录其实非常简单，有两种常用的处理方式，你可以根据自己的场景来选：

方式一：完全隐藏分页组件 #

如果你的需求是彻底去掉分页栏，让所有数据一次性展示，直接给Table组件设置pagination={false}就可以了，这是最直接的方案。

示例代码：

import { Table } from 'antd';

// 模拟数据源
const dataSource = [
  { id: 1, name: '张三', department: '产品部' },
  { id: 2, name: '李四', department: '技术部' },
  { id: 3, name: '王五', department: '设计部' },
  // 更多数据...
];

// 列配置
const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '部门', dataIndex: 'department', key: 'department' },
];

export default function FullRecordTable() {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      pagination={false} // 关键配置：禁用分页
      rowKey="id"
    />
  );
}

方式二：保留分页组件但默认显示全部数据 #

如果你需要保留分页的UI（比如允许用户后续手动切换分页条数），但默认状态下显示所有记录，可以通过配置pagination的具体参数来实现：

示例代码：

<Table
  dataSource={dataSource}
  columns={columns}
  pagination={{
    pageSize: dataSource.length, // 每页显示条数等于总数据量
    showSizeChanger: true, // 可选：保留条数选择器，用户可自行切换
    showTotal: (total) => `共 ${total} 条记录`, // 可选：显示总条数提示
  }}
  rowKey="id"
/>

两种方式都能达到显示所有记录的效果，选哪种就看你需不需要保留分页的交互啦～

内容的提问来源于stack exchange，提问作者Timur Catakli