项目中的数据,有大量重复的.所以需要前端做数据处理.这时候的总数/页数肯定是有问题的.所以就想到使用假分页的方式,进行赋值
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]" // 分页条数选择
:page-size="10" // 显示的条数
ref="oneTable.pageArea"
layout="prev, pager, next, sizes, ->, total"
:prev-text="$t('sys.content.prevPage')"
:next-text="$t('sys.content.nextPage')"
:current-page.sync="listQust.pageIndex" // 绑定页码
:total="pages" // 总数
></el-pagination>
</template>
export default {
data(){
return{
// 分页器
listQust: {
pageSize: 10,
pageIndex: 1
},
pages: 0,
}
},
methods:{
// 请求事件
query(){
// 请求
this.$store.dispatch(api/testapi).then(reponse=>{
if(response.result==="1"){
// 数据处理
var list=response.row // [{code:a},{code:a},{code:b}]
var listCols:[] // 用于过滤重复数据
// 过滤重复code方法1
for(var i in list){
var isPush=false
for(var k in listCols){
if(listCols[k].code== list[i].code){
isPush=true
}
}
if(!isPush){
listCols.push(list[i])
}
}
// 过滤重复code方法2
//for (var k = 0; k < list.length; k++) {
// var isExist = tableCols.filter(o => o.prop ===list[k].code);
// if (isExist.length === 0) {
// listCols.push(list[i]);
// }
// }
list=listCols.concat()// 拷贝数组 [{code:a},{code:b}]
//假分页处理
if (that.pages !== list.length) {
this.listQust.pageIndex = 1;
},// 总条数发生变化时重置开始截取的下标
that.pages = list.length; //总数
var begin =(that.listQust.pageIndex - 1) * that.listQust.pageSize;
var end =(that.listQust.pageIndex - 1) * that.listQust.pageSize +that.listQust.pageSize;
list = list.slice(begin, end);//截取显示的数量
})
}
},
// 选择分页事件
handleSizeChange(val) {
this.listQust.pageSize = val;
this.listQust.pageIndex = 1;
this.query();
},
// 当前页选中事件
handleCurrentChange(val) {
this.listQust.pageIndex = val;
this.query();
},
}
}