iview的table+page分頁
阿新 • • 發佈:2018-12-01
<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
})
},