antd 增加自增序號+分頁

使用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屬性，循環塞給每條數據，最后在前台渲染就行了   不過分頁還是要自己上述方法設置