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