reactjs - 使用分页时如何在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 issue 的评论中提供的解决方案但它没有用。我在这里错过了什么？

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