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) //点击第几页
		},
	}
}

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