Ant Design Vue 如何分页(后台传入)
我们在使用分页使,直接用表格()的自定义:pagination属性最方便;如下图所示:<a-tableref="table"style="margin-bottom: 24px"row-key="key":columns="goodsColumns":data-source="loadGoodsData":pagination="paginationOpt"
·
我们在使用分页使,直接用表格()的自定义: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(() => {});
},
更多推荐
已为社区贡献13条内容
所有评论(0)