1.添加分页控件(可在ElementPuls中查找)
<!--添加分页控件-->
<div class="demo-pagination-block">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 15, 20]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
2.设置分页控件用到的属性
data() {
return {
currentPage: 1,//当前页
pageSize: 5,//每页显示的记录数
total: 0,//总页数
search: '',//搜索框内容
}
},
3.定义分页控件用到的函数
handleSizeChange(pageSize){//修改每页显示的记录数时会被调用
this.pageSize = pageSize;
this.list();
},
handleCurrentChange(pageNum){//修改当前页时会被调用
this.currentPage = pageNum;
this.list();
}
4.list() 向服务器发送axios请求,获取数据
//编写一个list方法,请求返回所有的家居信息
list() {
/*request.get('api/furn/listFurn')//没有使用分页查询时的写法
.then(res => {
this.furnList = res.map.furnList;
})*/
request.get('api/furn/furnsByCondition', {
params: {/*请求需要传递的参数*/
pageNum: this.currentPage,//当前页
pageSize: this.pageSize,//每页大小
search:this.search//搜索条件
}
}).then(res => {/*成功后的回调函数*/
this.furnList = res.map.pageInfo.list;
this.total=res.map.pageInfo.total;
})
},