蚂蚁设计表如何显示空行

Question

我正在使用表组件使用ANT设计，并且想知道即使它们是空的，即使它们是空的，是否可以始终显示10行。例如，我有一个带有11个项目的数据集。页面大小设置为10，因此第一页上显示的前十项显示，第二页上显示的最后一项显示。但是第二页仅显示一行，我希望它显示10（一个带有项目和9个空行）。

我该怎么做？我应该编写功能还是可以在表组件上使用的道具？

的示例：

这是我第二页的当前^^^我的表组件

import React 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',
  },
];

function RenderTablePage(props) {
  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        title={() => 'Tabular View'}
      />
    </div>
  );
}
export default RenderTablePage;