分页必备要素:
:total:总条数
:page-size:一页几条
@current-change:分页事件
<div class="fenye">
<p style="color: #636363">共{{ totlaPage }}条</p>
<el-pagination
style="margin-top: 0"
background
layout="prev, pager, next"
:total="totlaPage"
:page-size="pageSize"
@current-change="currentChange"
:current-page.sync="currentPage"
></el-pagination>
</div>
data里面:
currentPage: 1,
totalPage: 0,
pageSize: 5, //一页5条
完事之后写方法:
method:{
// 表格先要有基本的数据,然后传值给后端才能实现分页
getData(){
this.axios.post('/xxx/xx/xxx(接口)',{
currentPage:this.currentPage;
pageSize:this.pageSize;
}).then((resp)=>{
this.totalPage = resp.data.total
})
}
},
// 点下一页刷新的方法
currentChange(e){
console.log(e);
this.currentPage = e;
this.getData()
},
// 分页不在第一页,模糊查询或下拉选项筛选后,让分页始终在第一页
// 这个事件是绑定在下拉或模糊查询事件的
//分页组件还得加上 :current-page.sync="currentPage"
toPageOne(){
this.currentPage = 1;
this.getData()
}