1.后台分页
<el-pagination
background
layout="prev, pager, next"
:total="total"
:current-page="currentPage"
:page-size="10"
@current-change="current_change"
></el-pagination>
layout:组件布局,子组件用逗号分隔
total:总条目数
current-page:当前页数(默认1)
page-size:每页显示条目数
current-change:currentPage改变时触发
current_change: function(currentPage) {
this.currentPage = currentPage; //改变当前页数
this.cellGrid(currentPage); //请求下一页数据
},
请求后台数据时传参
params: {
limit: 10, //每页条数
page: this.currentPage //当前页数
}
2.前端分页
在table组件中添加:
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
或者:(splice会改变原数组,需要一个空数组接收)
tableData.splice((currentPage-1)*pagesize,pagesize)
分页:
<el-pagination
background
layout="prev, pager, next"
:total="total"
:page-size="5"
@current-change="current_change"
></el-pagination>
data初始数据:
data:{
return {
total: 100,
pagesize: 5,
currentPage: 1
}
}
切换当前页
current_change: function(currentPage) {
this.currentPage = currentPage;
},