element表格分页

如果后端已经做了分页操作，可在提交参数的时候将查询页数的参数传递过去即可。如果后端没有分页，前端也可以自行分页。两者在性能上的区别大家可以自行搜索，大概意思就是：前端分页是一次性将所有的数据加载到浏览器的缓存中，对于少量数据操作方便，大数据操作时还得靠后端实现。
言归正传：
首先用到分页控件Pagination。

<el-pagination
 @size-change="handleSizeChange"       //pageSize 改变时会触发方法
 @current-change="handleCurrentChange" //currentPage 改变时会触发方法
 :current-page="pageNum"			   //当前页数，支持 .sync 修饰符
 :page-sizes="[5, 10, 20, 40]"		   //每页显示个数选择器的选项设置
 :page-size="pageSize"					//每页显示条目个数
 layout="total, sizes, prev, pager, next, jumper" //组件布局
 :total="total">
</el-pagination>

这样就能将分页区域显示出来，并配置对应的参数和触发的方法。

data() {
      return {
		//table中的数据
        meterList:[],
        //当前页数
        pageNum:1,
        //每页显示多少条
        pageSize:5,
        //仪表总数
        total:0, 
      };
}

methods: {     
		// 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        this.pageSize = newSize//将监听到的值保存到pagesize中
        this.getWingData()//会获得meterList
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        this.pageNum = newPage//将监听到的值保存到pagenum中
        this.getWingData()//会获得meterList
      }
}

最重要的是要实现table的分页功能需要在表格绑定数据时应做如下操作:

<el-table :data="meterList.slice((pageNum-1)*pageSize,pageNum*pageSize)"></el-table>