antd <a-table> 增加自增序号+分页

使用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属性，循环塞给每条数据，最后在前台渲染就行了   不过分页还是要自己上述方法设置