ant design vue table分页设置
1、设置pagination
<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :pagination="pagination"><a slot="action" href="javascript:;">查看</a><img style="width:20px;heigth:20px" slot="pic" slot-scope="text" :src=text /></a-table>
2、自定义pagination，注意写成onChange,change不行，灰色部分请根据自己实际代码修改。
data () {let self = thisreturn {collapsed: false,data,sels,columns,rowSelection,pagination: {pageNo: 1,pageSize: 20, // 默认每页显示数量showSizeChanger: true, // 显示可改变每页数量pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项showTotal: total => `共 ${total} 条`, // 显示总数onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//点击页码事件total:0 //总条数}}},methods: {onPageChange(page, pageSize) {this.pagination.pageNo = pagethis.getList()},onSizeChange(current, pageSize) {this.pagination.pageNo = 1this.pagination.pageSize = pageSizethis.getList()}}
3、Ajax读取数据列表时，pagination.total赋总条数即可
.then((response) => {this.data = response.data.itemsthis.pagination.total=response.data.totalNumconsole.log(response)})
4.读取数据时带上当前页、分页大小，过滤条件，后端代码可以简单使用通用分页方法返回Json数据即可
getList () {let filter= {xxx:this.queryParam.xxx,curPage:this.pagination.pageNo,pageSize:this.pagination.pageSize};// 请求参数console.log(filter) this.getData(filter)},
