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

Question

我在我的 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 问题的评论中提供的解决方案，但没有奏效。我在这里错过了什么？

Answer 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>
)