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

IT技术 reactjs antd
2022-07-27 23:34:03

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

3个回答

此处引用的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>
)

从 1 开始索引

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

如果您有分页并且分页是基于表格的下拉选择的动态分页，您可以使用它。

const [page, setPage] = useState(1);

const [paginationSize, setPaginationSize] = useState(25); //your current default pagination size 25
const columns: any = [
{
  title: '#',
  key: 'index',
  width: "20px",
  render: (text: string, record: any, index: number) => (page - 1) * paginationSize + index + 1,
}]
return(
<Table
    pagination={{
      onChange(current, pageSize) {
        setPage(current);
        setPaginationSize(pageSize)
      },
      defaultPageSize: 25, hideOnSinglePage: true, showSizeChanger: true
    }}columns={columns}
    dataSource={tableData} />
)
其它你可能感兴趣的问题
上一篇如何使用 antd upload react 发送 multipart/form-data 下一篇盖茨比在graphql查询返回后获取图像路径