一名前端臭弟弟的学习新得! (´๑•_•๑)
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
这样分页的当前页改变,数据也会显示相对应的数据。 ❀❀❀❀❀❀完结撒花❀❀❀❀❀❀