关于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的数据，这样就完成了。但是性能方面还没有考虑，需要在后面测试的时候才知道，这也只是我本人的一个思路，希望有更好的办法的同学多多帮帮我呀哈哈哈