版权声明：本文为QQ帝国原创博客，非经本人同意，且勿转载。。 https://blog.csdn.net/QQ_Empire/article/details/83507133
<Page :total="pageTotal" :current="pageNum" :page-size="pageSize"
show-elevator show-total placement="top" @on-change="handlePage"
>
</Page>data里数据
pageTotal: 10, //数据总数
pageNum: 1, //初始页
pageSize: 3, //每页条数
dataArr :[], //页面显示的数组一、没有后台情况下的分页
1、把从后台数据整理成分页需要的格式
var that = this;
axios({
url:"http://192.168.0.134:8080/queryPastHousepj",
// params:{projectname:that.proname,projectnum:that.pronum}
})
.then(function(data){
console.log(data.data)
var arr = data.data
for(var i in arr){
var obj={name:arr[i].producttype,diaoyan:arr[i].projectname,pic:arr[i].projectname}
// console.log(obj)
that.data1.push(obj)
}
that.pageTotal = that.data1.length;
//console.log(that.data1.length)
var _start = ( that.pageNum - 1 ) * that.pageSize; //pageNum 第几页 pageSize:每页几条数据
var _end = that.pageNum * that.pageSize;
that.dataArr = that.data1.slice(_start,_end);
})2、分页函数的处理
//分页
handlePage(value){
console.log(value)
this.pageNum = value;
var _start = ( value - 1 ) * this.pageSize;
var _end = value * this.pageSize;
this.dataArr = this.data1 .slice(_start,_end);
},二、后台配合情况下的分页
var that = this;
axios({
url:"http://192.168.0.134:8080/queryByLog",
params:{page:1}
})
.then(function(data){
console.log(data.data)
that.pageTotal = data.data.totalCount;
// that.pageNum = data.data.totalCount; //初始页
that.pageSize = data.data.limit; //每页条数
var arr = data.data.list;
that.shuju = arr
that.dataArr = that.shuju
//console.log(that.shuju)
}) //分页
handlePage(value){
console.log(value)
var that = this;
axios({
url:"http://192.168.0.134:8080/queryByLog",
params:{page:value}
})
.then(function(data){
console.log(data.data)
that.pageTotal = data.data.totalCount;
// that.pageNum = data.data.totalCount; //初始页
that.pageSize = data.data.limit; //每页条数
var arr = data.data.list;
that.shuju = arr
console.log(arr)
for(var i in arr){
that.shuju = arr
}
that.dataArr = that.shuju
})
},