使用分頁時如何在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>
)

Answer 2

從 1 開始索引

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

Answer 3

如果您有分頁並且分頁是基於表格的下拉選擇的動態分頁，您可以使用它。

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