ant-design-vue Table分页器的使用
一、实际效果
效果图:
一、页面代码
<a-table :columns="columns" :data-source="tableData" :rowSelection="rowSelection" :pagination="pagination" @change="tableChange" rowKey="schedule_guid"></a-table>
在这里重点讲的是这个pagination属性和change方法的绑定,所以其他代码咱们就不细讲了。
二、data中的属性和methods中的方法
pagination:{
total:0,
defaultPageSize:10,
showTotal: total => `共 ${total} 条数据`,
showSizeChanger:true,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize