antd vue表格分頁序號重置問題

問題描述：

　　使用antd表格a-table組件時，有時需要展示每條數據的序號。

　　通常在columns定義時寫為如下形式：

const columns = [
  {
    title: '序號',
    align: 'center',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`
  }
}

在不設置分頁的情況下，即pagination="false"，表格數據單頁顯示，且序號正常；

如果需要分頁，配置pagination="true"（默認，也可以不寫），會導致切換頁面后序號重新從1開始。

很明顯，我們期待上圖中第二頁序號應從11開始，因此只要拿到currentPage及pageSize，便可以計算當前頁的正確序號。

解決方法：

　　配置pagination對象，【序號】書寫為插槽形式。

1、data中定義pagination：

pagination: {
    current: 1,
    defaultCurrent: 1,
    pageSize: 10,
    onChange: this.onPageChange.bind(this)
}

2、method中增加onPageChange方法：

onPageChange (current) {
     this.pagination.current = current
}

3、【序號】書寫為插槽形式：

const columns = [
  {
    title: '序號',
    align: 'center',
    width: 200,
    scopedSlots: { customRender: 'dataIndex' }
  }
]

4、table組件配置：

<a-table
    :columns="columns"
    :dataSource="dataSource"
    bordered
    :pagination="pagination"
    :rowKey="(record, index) => index"
    :loading="tableLoading">
    <template slot="dataIndex" slot-scope="text, record, index">
      <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
    </template>
</a-table>