1,分页时候引入vue自带的分页组件实现:
(1) <!-- 分页操作 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage.page"
:page-sizes="[10,20,30,40,50]"
:page-size="currentPage.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="currentPage.pageTotal">
</el-pagination>
(2),return里面定义
currentPage :{
pageTotal:0,
pageSize: 10,
page: 1
},
(3),分页处理逻辑
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
let importdata = {
//当每页显示条数
pageSize:20,
//当前页码
pageNum:val
}
machinelistsearch(importdata).then((response)=>{
if(response.code == 200){
console.log(response,'分页操作返回的数据')
//显示数组
this.tableData = response.data.list
//总条数
this.currentPage.pageTotal = response.data.total;
}else{
this.$message({type: 'warning', message: ("设备发放列表查询失败")});
}
});
},