Ant Design Table分页：隐藏页码并调整行数选择框位置

针对你的需求，需要通过自定义分页渲染逻辑和状态同步来实现仅保留上下页按钮、调整行数选择框位置的效果，具体实现如下：

核心实现思路 #

1. 维护分页核心状态：当前页current和每页行数pageSize
2. 自定义分页元素渲染，仅保留上一页/下一页按钮
3. 重写分页栏布局，将行数选择框移至统计文本左侧

完整代码 #

import React, { useState } from 'react';
import { Table } from 'antd';
import type { ColumnsType, PaginationProps } from 'antd/es/table';

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<DataType> = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
  { title: 'Address', dataIndex: 'address' },
];

const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
  data.push({ 
    key: i, 
    name: `Edward King ${i}`, 
    age: 32, 
    address: `London, Park Lane no. ${i}` 
  });
}

const App: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10); // 新增每页行数状态

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = { selectedRowKeys, onChange: onSelectChange };

  return (
    <div>
      <Table 
        rowSelection={rowSelection} 
        columns={columns} 
        dataSource={data} 
        pagination={{
          current,
          pageSize,
          hideOnSinglePage: true,
          pageSizeOptions: [5, 10, 20],
          // 自定义统计文本
          showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
          // 分页切换事件
          onChange: (newCurrent, newPageSize) => {
            setCurrent(newCurrent);
            if (newPageSize) setPageSize(newPageSize);
          },
          // 每页行数切换事件
          onShowSizeChange: (_, newPageSize) => {
            setPageSize(newPageSize);
            setCurrent(1); // 切换行数时重置到第一页
          },
          // 仅渲染上一页/下一页按钮
          itemRender: (_, type, originalElement) => {
            if (type === 'prev' || type === 'next') {
              return originalElement;
            }
            return null; // 隐藏页码、跳转输入框等元素
          },
          // 自定义分页栏整体布局
          render: (paginationData, { 
            pageSize, 
            pageSizeOptions, 
            onShowSizeChange, 
            showTotal, 
            total, 
            range 
          }) => (
            <div style={{ 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'space-between',
              padding: '8px 0'
            }}>
              {/* 左侧：行数选择框 + 统计文本 */}
              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                <select
                  value={pageSize}
                  onChange={(e) => onShowSizeChange(+e.target.value, +e.target.value)}
                  style={{
                    padding: '4px 8px',
                    border: '1px solid #d9d9d9',
                    borderRadius: '4px',
                    backgroundColor: '#fff',
                    cursor: 'pointer'
                  }}
                >
                  {pageSizeOptions.map(size => (
                    <option key={size} value={size}>{size}/page</option>
                  ))}
                </select>
                <span>{showTotal(total, range)}</span>
              </div>
              {/* 右侧：上一页/下一页按钮 */}
              <div style={{ display: 'flex', gap: '8px' }}>
                {paginationData.prevNode}
                {paginationData.nextNode}
              </div>
            </div>
          )
        }}
      />
    </div>
  );
};

export default App;

关键说明 #

• 隐藏多余元素：通过itemRender仅返回上一页/下一页按钮，其他分页元素（页码、跳转框）返回null实现隐藏
• 布局自定义：利用render属性完全重写分页栏结构，将行数选择框与统计文本放在左侧，上下页按钮放在右侧
• 状态同步：手动维护current和pageSize状态，确保分页操作与Table数据展示同步
• 样式适配：通过内联样式调整元素间距和对齐方式，保持与Ant Design默认风格一致

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