vue-elementUI-分页插件的使用

控件

<!-- 分页插件-->
		<el-pagination
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange" :current-page="currPage"
		    :page-sizes="[2,4]"
		    :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper"
		    :total="total">
		</el-pagination>

定义属性

 pageSize:2,  //每页显示条数
 total:0 ,    //一共有多少条记录
 currPage:1,   //当前页

方法

// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function(pageSize) { // 每页条数切换
this.pageSize = pageSize
this.handleCurrentChange(this.pageSize);
},
handleCurrentChange: function(currentPage) {//页码切换
	this.currPage = currentPage   //确定当前页
	this.currentChangePage(this.news,currentPage)//news要显示的数据
},
 //分页方法（重点）
currentChangePage(list,currentPage) {
	let from = (currentPage - 1) * this.pageSize;
	let to = currentPage * this.pageSize;
	this.newsTemp = this.news.slice(from,to)
	//console.log(this.newsTemp)
},

控件的属性介绍可以去elementUI看