问题：
使用iView的Page组件实现分页效果，从现实角度来说，肯定是真分页才有现实的价值，但是假分页也很重要，是一个学习的过程。（ps:真分页就是每次前段请求，后端拿到请求去调用接口查询数据库。假分页就是前段一次请求，后端一次性查询所有或者固定页数。之后前段的请求全从之前拿到的里面分批给前段）
组件：
组件Table和组件Page
<!-- 数据表格 -->
<Table stripe :loading="loading" border :columns="listcolumns" :data="pagerData.data" style="overflow-y: hidden;max-height: 522px;"></Table>
<!-- 分页栏 -->
<div class="page_div">
<Page :total="pagerData.page.totalCount" page-size=10 style="padding-left: 20px;" size="small" @on-change="onChange" show-total show-elevator show-sizer></Page>
</div>相关JavaScript
pagerData:{
data:[],
page:{
//分页数
arrPageSize:[10,20,30,40],
//分页大小
pagesize:10,
//总分页数
pageCount:1,
//当前页面
pageCurrent:1,
//总数
totalCount:80
}
}过程：
1.先在created函数中把数据请求回来
created(){
this.$axios.post("http://localhost:8088/Web/List",
{"abc":"def"},
{headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}}
)
.then(res=>{
//console.log(JSON.stringify(res.data));
var totalNum = 0;
for(var i = 0; i < res.data.length; i++){
//console.log("res.data[i] is " + i + "\n " + JSON.stringify(res.data[i]));
var object = eval(res.data[i]);
object.index = i+1;
totalNum ++;
//console.log("i is " + i + "\n " + JSON.stringify(object));
this.listdata.push(object);
if(i<=10){ //初始化获取数据的过程中，将前10个默认加入分页data
this.pagerData.data.push(object);
}
}
this.pagerData.page.totalCount = totalNum;
});
this.loading = false;
}Vue.js使用axios（和ajax差不多）来请求全部数据，并将数据全部放入listdata对象数组中，姑且成称为全集A。
将前10条数据放入pagerData.page中，姑且称为分页子集B。
2.点击下页按钮，执行换页操作
methods:{
onChange:function(curpage){
alert("当前页面页码是：" + curpage);
this.pagerData.data.splice(0,this.pagerData.data.length);
//alert("当前页面应该显示的数据index是："); // 10(n-1) ~ 10n
for(var i = 10*(curpage - 1) + 1;
i<= ((this.pagerData.page.totalCount>10*curpage)?(10*curpage):(this.pagerData.page.totalCount));
i++){
console.log(" i = " + i + "，item：" + JSON.stringify(this.listdata[i]));
this.pagerData.data.push(this.listdata[i-1]);
}
}
},onChange函数是自定义函数，绑定Page 事件 @on-change curpage是回调参数，返回当前页码
根据当前页码，选取其中的数据加载进分页子集B中（之前要清空，可以使用splice函数）。
细节：
请求数据不是整十位数
最开始的时候，onChange换页时，使用for(var i = 10*(n-1) ; i<=10n;i++)，结果从服务端返回的参数是29条，导致最后一页加载不出来。
使用三目运算符，i<= ((this.pagerData.page.totalCount>10*curpage)?(10*curpage): 当前总记录数进行判断，是否是最后一页。