ant-design-vue Table pagination分页实现
ant-design-vue Table自带分页的问题
表格单独使用时，自带简单分页，只包含 上一页, 页面码, 下一页,例如：
我们的实现
但如果想要与后端配合着写，则需要传入pagination参数来自定义，
看代码：
分页变动出发handleTableChange事件：
<a-table
:columns="columns"
:data-source="wmsWarehouseList"
:pagination="pagination"
@change="handleTableChange"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
data () {
return {
// 分页参数
pagination: {
// size: 'large',
current: 1,
pageSize: 10,
total: 0,
pageSizeOptions: ['10', '20', '30'], // 可选的页面显示条数
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
}, // 展示每页第几条至第几条和总数
hideOnSinglePage: false, // 只有一页时是否隐藏分页器
showQuickJumper: true, // 是否可以快速跳转至某页
showSizeChanger: true // 是否可以改变pageSize
},
}
}
methods: {
handleTableChange (e) {
console.log(e)
this.pagination = e
this.loading = true
const pageNum = e.current - 1
const pageSize = e.pageSize
const query = {
...this.queryParams,
}
const pageReq = { page: pageNum, size: pageSize }
listWmsWarehouse(query, pageReq).then((response) => {
})
},
onChange与onShowSizeChange 比较
onChange：页码改变的回调，参数是改变后的页码及每页条数onShowSizeChange：只有pageSize 变化才会回调
Ant Design Vue 如何分页（后台传入）
我们在使用分页使，直接用表格()的自定义:pagination属性最方便；如下图所示：
<a-table
ref="table"
style="margin-bottom: 24px"
row-key="key"
:columns="goodsColumns"
:data-source="loadGoodsData"
:pagination="paginationOpt"
bordered>
</a-table>基于VUE，我们必须在data中定义paginationOpt对象，代码片段如下：
// 分页
paginationOpt: {
defaultCurrent: 1, // 默认当前页数
defaultPageSize: 5, // 默认当前页显示数据的大小
total: 0, // 总数，必须先有
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ["5", "10", "15", "20"],
showTotal: (total) => `共 ${total} 条`, // 显示总数
onShowSizeChange: (current, pageSize) => {
this.paginationOpt.defaultCurrent = 1;
this.paginationOpt.defaultPageSize = pageSize;
this.searchCameraFrom(); //显示列表的接口名称
},
// 改变每页数量时更新显示
onChange: (current, size) => {
this.paginationOpt.defaultCurrent = current;
this.paginationOpt.defaultPageSize = size;
this.searchCameraFrom();
},
},调用接口时，❤一定要更新total值！！！！！❤并在发送请求前结构当前页和pagesize的值，否则一直时默认值1和5（我这边初始时1和5，可自己更改）
// 查询
searchCameraFrom() {
console.log(this.cameraParams);
const { defaultCurrent, defaultPageSize } = this.paginationOpt;
this.$api.Camera.getCameraList({
currPage: defaultCurrent,
pageSize: defaultPageSize,
info: this.cameraParams,
})
.then((res) => {
if (res.code != "200") {
return Promise.reject;
}
console.log(res);
this.cameraList = res.data;
this.paginationOpt.total = res.total;
})
.catch(() => {});
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
