vue+element实现分页功能

一名前端臭弟弟的学习新得！     (´๑•_•๑)

VUE+Element实现数据分页功能
先奉上代码，在慢慢细品。

<template>
<div>
	<div>
	  <ul v-for="(item,i) in pagnote2" :key="i">
	    <li :title="item.artType">{{item.artType}}</li>          
	  </ul>    
	</div>
	<div>
	  <el-pagination  @current-change="handChange"
	     background
	     layout="prev, pager, next"
	     :total="pagtotal"
	     :page-size="pagsize">
	  </el-pagination>
	 </div>	
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
	return{
		items:[],//存数据
		pagtotal:0,//初始化总条数
		pagsize:1,//定义每页显示的条数
		pagnote:[],//存储操作过后的数据
		pagnote2:[], //存储分页时间每页的数据
	}
},
methods:{
	getLists:function(){
		axios.get('此处调用数据接口').then(res=>{
			console.log(res);//打印接口返回的数据
			this.items=res.data.data;//获取数据
			this.pagtotal=res.data.data.length;//获取数据的长度
			this.getList(this.items, this.pagsize);//调用分页的逻辑，将数据变成我们需要的样子
		}).catch(error=>{
			console.log(error)
		})
	},
	handChange(val) {
		console.log(val);//此处val为当前页数，随点击变化而变化，默认为1
		this.pagnote2=this.pagnote[(val-1)];//将操作好的数据分配到每个页面
	},
	getList(arr, size) {//分页逻辑
		var length = arr.length;
		var newArr = [];
		var i=Math.ceil(length/size*1.0);
		var j = 0;
		while(j<i){
			newArr.push(arr.slice(j*size,size*(j+1)))
			j++;
		}
		this.pagnote=newArr;
		this.pagnote2=newArr[0];     
		console.log("分页",this.pagnote)
	}
},
	mounted:function(){//运行代码
		this.getLists();
	}
}
</script>

开始分析~~~~~~~~~~~~~~~~~~~~

getList(arr, size) {
		var length = arr.length;
		var newArr = [];
		var i=Math.ceil(length/size*1.0);
		var j = 0;
		while(j<i){
			newArr.push(arr.slice(j*size,size*(j+1)))
			j++;
		}
		this.pagnote=newArr;
		this.pagnote2=newArr[0];     
		console.log("分页",this.pagnote)
	}

分页逻辑
1.将数据按照每页需要展示的个数进行展示
2.将数据进行分割
举个例子
假如我有7条数据，准备每页显示2条，我需要分成4组
所以 我需要 7/2=3.5 用 Math.ceil 方法 进行向上取整 得到4 所以我就需要循环4遍 附值给变量 i
定义一个变量 j=0; 每次循环结束让 j加1 判断条件为（j<i）
之后我需要把7条数据两两配对 获得新数据 newarr=[[2条数据]，[2条数据]，[2条数据]，[1条数据]]；
重点的来喽
把数据可视化一下
newarr=[[old[0],[old[1]]，[[old[2],[old[3]]，[[old[4],[old[5]]，[[old[6]]；
然后需要截取数组用slice
仔细观察截取的逻辑是
slice（0,2）
slice（2,4）
slice（4,6）
slice（6,8）//此处的8是大脑自定为8 因为截取的第二参数大于数组长度时，会截取到数组结束，不会有影响的。
所以 得到
（0乘2，2乘(0+1)） ====》j乘size,size乘(j+1) //size为每页想要显示的条数 循环结束j+1
（1乘2，2乘(1+1)） ====》j乘size,size乘(j+1) 循环结束j+1
（2乘2，2乘(2+1)） ====》j乘size,size乘(j+1) 循环结束j+1
（3乘2） ====》j乘size

杀死这道题       newArr.push(arr.slice(j乘size,size乘(j+1)))//将数据截取然后循环添加到新数组
this.pagnote=newArr;//将新数组赋给 .pagnote
this.pagnote2=newArr[0];分配给第一页的数据，第一页的数据是newArr[0]的数据，用于页面显示

 <el-pagination  @current-change="handChange"  中的@current-change为ElementUI分页插件的页面
 变化触发的事件 默认为1
 	handChange(val) {
		console.log(val);//此处val为当前页数，随点击变化而变化，默认为1  上面说过了
		this.pagnote2=this.pagnote[(val-1)];//将操作好的数据分配到每个页面
	}

因为数据双向绑定 所以一开始 pagnote2=newArr[0]
当分页的页数改变后，触发  handChange 改变 pagnote2的值
第一页的数据等于  newArr[0]
第二页的数据等于  newArr[1]
第三页的数据等于  newArr[2]
所以 this.pagnote2=this.pagnote[(val-1)];   刚才已经把 newArr的值都赋给了 pagnote
这样分页的当前页改变，数据也会显示相对应的数据。       ❀❀❀❀❀❀完结撒花❀❀❀❀❀❀