vue+element实现分页效果

之前一直不太明白element的分页怎么实现，当时自身实力确实有些欠佳，只看官网无法理解它的用法，此刻记录一下自己的经验。
分页功能使用v-for和element表格都是一样的，只需要对获取的数据进行一次拆分即可，html部分代码如下：

//v-for方法
<el-card v-for="(item,i) in data.slice((currentPage-1)*pagesize,currentPage*pagesize)">
//el-table方法
<el-table :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)">


此处的currentPage是当前页，pagesize是每页显示几条数据，接下来在js中添加data数据和method方法：

export default {
data() {
return {
currentPage: 1, //初始页
pagesize: 10, // 每页的数据,数字是几就显示几条
data: [{
date: "2020-03-08",
name:"Frank",
email:"123@mail.com",
address:"洛圣都14号"
},]
}
},
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function(size) {
this.pagesize = size;
console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage) //点击第几页
},
}
}


这样就解决了，效果如下：