使用分页时如何在Antd Table中为每一行设置序列号答案

【问题标题】：How to set serial number in Antd Table for each row when we use pagination使用分页时如何在Antd Table中为每一行设置序列号
【发布时间】：2020-01-09 05:51:32
【问题描述】：

我在我的 react js 项目中使用 Antd Table。我有一个表，分页设置为每页 10 个条目。我的问题是当我单击第二页时，我看到序列号再次从 1 而不是 11 开始。它不是按顺序排列的。这是我的代码。

组件

function createColumns(view, edit, remove, activate) {
 return [
{
  title: 'S NO',
  key: 'sno',
  width: '20px',
  render: (text, object, index) =>return  index + 1

},
...
...

}
 <TableWrapper
          rowKey={obj => obj.id}
          pagination={{ pageSize: 10 }}
          columns={this.columns}
          locale={{ emptyText: 'No data found' }}
          dataSource={data}              
        />

我已经尝试了github issue 的评论中提供的解决方案，但没有奏效。我在这里错过了什么？

【问题讨论】：

标签： reactjs antd

【解决方案1】：

这里提到的index字段是相对于当前渲染的数据而言的，所以在新页面上总是从0开始。为了即兴发挥并适应您的情况，您可以存储当前页码并使用它来更改index

const [page, setPage] = React.useState(1);
return (
  <Table
    dataSource={data}
    pagination={{
      onChange(current) {
        setPage(current);
      }
    }}
  >
    <Column
      title="Index"
      key="index"
      render={(value, item, index) => (page - 1) * 10 + index}
    />
    ...
  </Table>
)

【讨论】：

【解决方案2】：

从 1 开始索引

render={(value, item, index) => (page - 1) * 10 + index + 1}

【讨论】：