Ant Design Table分页固定行数 不足补空行实现方法

Ant Design 的 Table 组件没有提供内置prop直接实现固定行数自动补空行的效果，需要自行结合分页状态处理数据源即可实现，实现成本很低。

实现思路 #

• 固定分页pageSize为10，将分页改为受控模式，实时获取当前所在页码
• 每次页码变化、原始数据更新时，截取当前页对应的有效数据，计算当前页有效数据和pageSize的差值，生成对应数量的空数据对象补到列表末尾
• 补全后的列表传给Table渲染即可，空数据对象要保证key唯一，避免React渲染报错
• 可选：给空行增加专属标识，用于设置空行样式、禁用空行的交互（选中、点击等）

核心实现代码 #

1. 封装补空行的工具函数 #

/**
 * 给表格当前页补全空行
 * @param {Array} originList 原始全量数据
 * @param {Number} pageSize 每页固定行数
 * @param {Number} currentPage 当前页码
 * @returns 补全空行后的当前页数据
 */
const fillEmptyRows = (originList, pageSize, currentPage) => {
  const total = originList.length;
  // 计算当前页数据的起止索引
  const startIdx = (currentPage - 1) * pageSize;
  const endIdx = Math.min(startIdx + pageSize, total);
  // 截取当前页有效数据
  const currentValidData = originList.slice(startIdx, endIdx);
  // 计算需要补充的空行数量
  const needEmptyCount = pageSize - currentValidData.length;
  if (needEmptyCount <= 0) return currentValidData;
  // 生成空行数据
  const emptyRows = Array.from({ length: needEmptyCount }).map((_, index) => ({
    // 空行key加特殊前缀，保证和有效数据key不重复
    key: `__empty_row_${currentPage}_${index}`,
    // 所有业务字段留空
    asylumOffice: '',
    citizenship: '',
    raceOrEthnicity: '',
    caseOutcome: '',
    completion: '',
    currentDate: '',
    // 空行标识，用于后续样式、交互控制
    __isEmpty: true
  }));
  return [...currentValidData, ...emptyRows];
};

2. 修改表格组件，接入分页受控和数据补全逻辑 #

import React, { useState, useMemo } from 'react';
import { Table } from 'antd';

// 原有列配置保持不变
const columns = [
  {
    title: 'Asylum Office',
    dataIndex: 'asylumOffice',
    key: 'asylumOffice',
  },
  {
    title: 'Citizenship',
    dataIndex: 'citizenship',
    key: 'citizenship',
  },
  {
    title: 'Race or Ethnicity',
    dataIndex: 'raceOrEthnicity',
    key: 'raceOrEthnicity',
  },
  {
    title: 'Case Outcome',
    dataIndex: 'caseOutcome',
    key: 'caseOutcome',
  },
  {
    title: 'Completion',
    dataIndex: 'completion',
    key: 'completion',
  },
  {
    title: 'Current Date',
    dataIndex: 'currentDate',
    key: 'currentDate',
  },
];

// 原始全量数据保持不变
const data = [
  {
    key: '1',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'other',
    caseOutcome: 'pending',
    completion: 'n',
    currentDate: 'f',
  },
  {
    key: '2',
    asylumOffice: 'AWS',
    citizenship: 'A',
    raceOrEthnicity: 'other',
    caseOutcome: 'pending',
    completion: 'Y',
    currentDate: 'e',
  },
  {
    key: '3',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '4',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '5',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '6',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '7',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '8',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '9',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '10',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
  {
    key: '11',
    asylumOffice: 'AyS',
    citizenship: 'h',
    raceOrEthnicity: 'latino',
    caseOutcome: 'pending',
    completion: 's',
    currentDate: 'f',
  },
];

// 固定每页10行
const FIXED_PAGE_SIZE = 10;

function RenderTablePage(props) {
  // 受控管理当前页码
  const [currentPage, setCurrentPage] = useState(1);

  // 实时计算当前页需要渲染的、补完空行的数据
  const currentPageTableData = useMemo(() => {
    return fillEmptyRows(data, FIXED_PAGE_SIZE, currentPage);
  }, [currentPage]);

  return (
    <div>
      <Table
        columns={columns}
        dataSource={currentPageTableData}
        title={() => 'Tabular View'}
        pagination={{
          current: currentPage,
          pageSize: FIXED_PAGE_SIZE,
          total: data.length,
          onChange: (page) => setCurrentPage(page)
        }}
        // 可选：给空行加自定义类名设置样式
        rowClassName={(record) => record.__isEmpty ? 'table-empty-row' : ''}
        // 如果有行选择功能，可取消注释下面配置禁用空行的勾选框
        // rowSelection={{
        //   getCheckboxProps: (record) => ({
        //     disabled: record.__isEmpty
        //   })
        // }}
      />
    </div>
  );
}
export default RenderTablePage;

可选样式补充 #

如果需要让空行视觉上和有效数据做区分，可以加对应CSS：

.table-empty-row td {
  color: #ccc;
  cursor: default;
  background-color: #fafafa;
}

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