效果
使用<el-pagination></el-pagination>组件
size-change和current-change事件来处理页码大小和当前页变动时候触发的事件
page-sizes接受一个整型数组
样式
//完整功能
<div class="pageStyle">
<el-pagination
style="float: right"
background
@size-change="handleSizeChange"
:current-page="searchForm.pageNum"
:total="total"
:page-sizes="pageSize"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
></el-pagination>
</div>
data() {
return {
pageSize: [10, 20, 30],
pageNum: 1,
searchForm: {
supplierName: "",
registeredAddress: "",
agreementRegionGuid: null,
pageNum: 1,
pageSize: 10,
},
}
}
方法
methods: {
handleSizeChange(val) {
this.searchForm.pageNum = 1;
this.searchForm.pageSize = val
this.getList()
},
handleCurrentPageChange(val) {
this.searchForm.pageNum = val;
this.getList()
},
}
getList() {
this.tableLoading = true;
getSupplierUserList(this.searchForm).then((res) => {
this.tableLoading = false;
if (verifyResIsSuccess(res)) {
this.tableData = res.data.data || [];
this.total = res.data.total;
}
})
},