Element UI 表格和分页联动

第一步

处理表格渲染的数据

<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
</el-table>

第二步

分页器

<el-pagination 
	@size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[1,2,3,4]"
  :page-size="pagesize"
  layout="total,sizes,prev,pager,next,jumper"             
  :total="tableData.length"
></el-pagination>               

第三步

data 数据处

tableData:[],
currentPage:1, // 默认开始页面
pagesize:1, // 每页的数据条数

第四步

methods 函数处

handleSizeChange(val){
		console.log(`每页 ${val} 条`);
  	this.pagesize = val
},
handleCurrentChange(val){
		console.log(`当前页：${val} `);
  	this.currentPage = val
}