如何将from ... to ...元数据添加到antd表分页

【问题标题】：How to add from ... to ... meta data to antd table pagination如何将from ... to ...元数据添加到antd表分页
【发布时间】：2021-03-10 11:48:13
【问题描述】：

这是我想做的类似的示例图像

【问题讨论】：

你看过this吗？ Antd 的 Pagination 组件与表格分页非常相似。
是的，但没有我想要的东西
showTotal 的道具不是你想要的？

标签： reactjs antd

【解决方案1】：

当您可以使用 showTotal 道具时，不确定您为什么选择自定义解决方案：

<Table
  columns={columns}
  dataSource={data}
  pagination={{
    showTotal: (total, range) => `${range[0]} - ${range[1]} / ${total}`,
    pageSize: 10
  }}
  ...
/>

DEMO

【讨论】：

【解决方案2】：

终于找到解决办法了

const getTableMeta = (current, pageSize, total) => {
      let from = (current - 1) * pageSize + 1;
      let to = (current - 1) * pageSize + pageSize
    
      if (to > total) {
        to = total;
      }
    
      return (`${from} - ${to} / ${total}`)
    }

使用antd table pagination api可以轻松获取current、pageSize、total参数。

【讨论】：