使用pagination元件來設定分頁

1.在table中引入pagination

 <a-table :pagination="pagination":columns="columns"
           @change="tableChange" :data-source="data" size="small" bordered>
a-table>

2.在data返回值中初始化pagination

pagination: {
        total: 0,  //資料總數
        current: 1,//當前頁數
        defaultPageSize: 10,//
 
預設每頁顯示10條資料
        showTotal: total => `共 ${total} 條資料`, // 展示總共有幾條資料
        showSizeChanger: true, //顯示修改pageSize的下拉框
        pageSizeOptions: ['5', '10'], //設定pageSize的可選值，頁面啊可以通過下拉框進行選擇
        onShowSizeChange: (current, pageSize) => this.pageSize = pageSize
      },

3.定義tableChange方法

tableChange(pagination, filters, sorter){
      
 
this.pagination = pagination;
    },

4.增加序號

 {
   title: '序號',
   width: '5%',
   dataIndex: 'num',
   customRender:(text,record,index)=>`${(this.pagination.current-1)*this.pagination.defaultPageSize + (index+1)}`
},

5.最終效果

6.沒想到還有6吧

另一種的方法：後臺傳資料到前臺時，增加一個key屬性，迴圈塞給每條資料，最後在前臺渲染就行了 不過分頁還是要自己上述方法設定