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