在 antd 表中，您可以将分页和页脚 somhow 结合起来吗?

Question

我正在尝试在 antd 表中节省垂直空间。我正在尝试在表格底部与分页器一起呈现一个"导出 CSV"链接。您可以在分页器中获取每个项目的项渲染，但无法充分呈现。即：

    itemrender(page, type, originalElement) {
        if (type === "prev") {
            return <><a onClick={() => ExportCSV()}>Export CSV</a>{originalElement}</>
        }
        return <>{originalElement}</>;
    }

导致局促、换行的方式，因为"prev"的 a 标记和 a 标记都呈现在同一个<li>块内。

我尝试在表格页脚中渲染分页器，但该分页器未连接到表格。

有没有办法将分页器移动到页脚中，并且仍然以某种方式将其连接到表格？

Answer 1

正如你提到的，如果你想让Pagination在页脚中可用，你需要自己实现与表的"连接"。

请注意，在使用 Table 组件时，您可以使用所有分页 API，因此您可以将其自定义为较小的大小：

<Table pagination={{ size: "small" }}/>

Answer 2

我有一个非常相似的用例，并登陆这里进行搜索， 以下是我设法将分页与表页脚相结合的方法。

import { Table, Pagination, Row } from 'antd';
const TableFooter = ({
  paginationProps
}) => {
    return( 
      <Row
        justify='space-between'
      >
         <Row>
            Some Left Side Content...
         </Row>
         <Pagination 
            {...paginationProps}
         />
      </Row>
    )
}
const App = () => {
  const pagination = {
    current: 1,
    total: 0,
    pageSize: 10,
    showTotal: (total, range) => `Total ${total} Pokemons`,
    onChange: onPaginationChange
  }
  
  const columns = [
    {title: "ID", dataIndex: "id"},
    {title: "Name", dataIndex: "name"}
  ]
  
  const data = [
    {id: 1, name: "Pikachu"},
    {id: 2, name: "Psyduck"}
  ]
  return (
    <Table 
      columns={columns}
      data={data}
      footer={() => 
        <TableFooter />
      }
      pagination={false}
    />
  )
}
ReactDOM.render(
  <App />,
  document.getElementById('react')
);