关于element组件中分页的一些个人思路

最近在用element,用到了它的分页这个组件,我这边的情况是,我前端请求数据,数据大概有20个的样子,把数据存在data的一个数组里面,用一个v-for循环遍历数组内容,并用div装起来,这样20个数据就从上往下排列了出来,但是我想使用分页,一个分页只显示5个数据,那么就有4页,这个效果怎么做到呢?

我本人也是思考了一下,主要用到里面的两个属性一个方法,属性是

:page-size="5"
:total="sites[0].allPages">

sites是后台返回的json数据,且后台在数组下标为0返回的是我的一个总长度,也就是20,我这边循环是用了数组的一个slice方法让其从1开始循环,element会自动根据你的size和total生成总的

页数,先贴我的代码

handleCurrentChange(val) {
var that =this;
$.ajax({
url: 'http://113.250.159.232:8081/Title/PrePages',
type: 'post',
contentType:'application/json;charset=UTF-8',
dataType: 'json',
data:JSON.stringify(val),
success: function (data) {
var json =data;
that.sites=json;
that.number=val;





},
error: function (data) {
console.log(data);
}
});

},

这里这个方法是当你页数变化时,也就是你点1,2,3,4页时执行的函数,里面的参数val是你当前点击哪个页数的数字,我的思路是我在页数变化时发送一个ajax给后台,并把val值传给后台

后台根据val值判断传回来的数据是哪些,但是一个bug出来了,就是这个函数是必须你点击页面角标变化时才执行,也就是我一开始页面加载完后我什么都看不到,但是我点到第二页后,数据便出来了,这个时候可以在mounted函数中一个ajax请求,并传一个数字1,因为点到第二页才生效,第一页相当于后台没有得到传过去的数据,所以没做处理,因为我在页面加载完后自动是第一页,那么我把1传给后台,后台再响应并传回原本属于1的数据,这样就完成了。但是性能方面还没有考虑,需要在后面测试的时候才知道,这也只是我本人的一个思路,希望有更好的办法的同学多多帮帮我呀哈哈哈

猜你喜欢

转载自www.cnblogs.com/chenyuhang/p/10039752.html