element中分页器 数据假分页处理

项目中的数据,有大量重复的.所以需要前端做数据处理.这时候的总数/页数肯定是有问题的.所以就想到使用假分页的方式,进行赋值

<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();
	    },
	}
}