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

使用pagination组件来设置分页

1.在table中引入pagination

 
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.最终效果

antd <a-table> 增加自增序号+分页_第1张图片

antd <a-table> 增加自增序号+分页_第2张图片

 6.没想到还有6吧

另一种的方法:后台传数据到前台时,增加一个key属性,循环塞给每条数据,最后在前台渲染就行了   不过分页还是要自己上述方法设置

你可能感兴趣的:(antd <a-table> 增加自增序号+分页)