借鉴 https://blog.csdn.net/u014418725/article/details/79702001 Vue.js iView Page分页组件之假分页
使用vue的Page组件实现分页效果，从现实角度来说，肯定是真分页才有现实的价值，但是假分页也很重要。
真分页就是每次前段请求，后端拿到请求去调用接口查询数据库。
假分页就是前段一次请求，后端一次性查询所有或者固定页数，之后前段的请求全从之前拿到的里面分批给前段。
template页
<avue-crud ref="partner"
:data="tableData"
:table-loading="tableLoading"
:option="tableOption"
:page="page"
@size-change="sizeChange"
@current-change="currentChange"
@on-load="getList" >
</avue-crud>
script
data() {
return {
listdata:[],
tableData: [],
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 10 // 每页显示多少条
},
tableLoading: false,
tableOption: tableOption
}
},
computed: {
...mapGetters(['permissions'])
},
created() {
request({
url: 'http://localhost:8080/api/com.XXX.Card',
method: 'get'
}).then(response => {
//console.log(JSON.stringify(response.data))
let totalNum = 0;
for(var i=0;i<response.data.length;i++){
// console.log("res.data[i] is " + i + "\n " + JSON.stringify(response.data[i]))
var object = eval(response.data[i])
object.index = i+1;
//console.log("i is " + i + "\n " + JSON.stringify(object));
totalNum ++;
this.listdata.push(object);
// console.log(object)
if(i<this.page.pageSize){ //初始化获取数据的过程中，将前10个默认加入分页data
this.tableData.push(object);
}
this.page.total = totalNum;
}
this.tableLoading = false
}).catch(function (error) {
alert(error);
});
},
methods: {
getList(currentPage) {
//console.log("当前页面页码是：" + currentPage)
this.tableData.splice(0,this.tableData.length);
for(var i = this.page.pageSize*(currentPage - 1) + 1;
i<= ((this.page.total>this.page.pageSize*currentPage)?(this.page.pageSize*currentPage):(this.page.total));
i++){
this.tableData.push(this.listdata[i-1]);
}
this.tableLoading = false
},
sizeChange(val) {
this.page.currentPage = 1
this.page.pageSize = val
this.getList(this.page.currentPage)
},
currentChange(val) {
this.page.currentPage = val
this.getList(val)
// this.$message.success('页码' + val)
},
}
网友评论