Ant Design Vue-table 序號自增的問題 翻頁自增

參考鏈接：

https://www.cnblogs.com/emmamayday/p/14240948.html
https://blog.csdn.net/qq_38344500/article/details/105995886

 

1、使用render

在  columns 中添加字段

 {
    title: '序號',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 50,
    customRender: (text,record,index) => `${index+1}`,
 },

使用customRender函數來渲染序號的數據，在customRender函數中：

1、text表示是序號一列默認顯示的數據

2、record表示是一行的所有數據

3、index表示Table表格數據的下標，也就是數組的下標

 

因為數組的下標是從0開始的，所以需要+1。

這樣設置不改變原數據中序號，只改變表格一頁的中所顯示數據的序號：如一頁顯示10條數據，那么本頁的序號則是從1~10

這個只能解決不會翻頁的自增問題，如果翻頁會出現下一頁也是從1開始

 

2、使用 slot  插槽

 在  columns 中添加字段

const columns = [
  {
    title: '序號',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 50,
    // customRender: (text, record, index) => `${index + 1}`.
    scopedSlots: { customRender: 'num' }
  },
]

 data已經定義了  current 以及  pageSize

在  a-table  組件添加

    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        rowKey="id"
        bordered
      >
        <span
          slot="num"
          slot-scope="text, record, index"
        >
          {{(current-1)*pageSize+parseInt(index)+1}}
        </span>
   </a-table>

 這樣ant-design的VUE的table分頁綁定的pagination就可以實現分頁序號自增了，后一頁的開始是前一頁最后序號的+1了