elementUI 分页组件的使用 - 踩坑篇
elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面:(踩坑一则)
因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以
本例只是demo说解
,并非举一反三或万能分页;但是传统的客户需求还是完全能够通用和满足的。
一、分页效果图
二、elementUI 分页组件的使用 - 应用篇
<!-- 分页组件 -->
<div class="pageturn">
<el-pagination
background
@size-change="pageSizeChange"
@current-change="pageCurrentChange"
:current-page="pageform.pageNum"
pager-count="5"
:page-sizes="pageform.pageSizes"
:page-size="pageform.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageform.total">
</el-pagination>
<!-- <div style="color:#333;padding:10px 0;">共 {{pageform.pages}} 页
上一页是第:{{pageform.navigateFirstPage}} 页
下一页是第:{{pageform.navigateLastPage}} 页
</div> -->
</div>
三、注意:
在上图所示返回的data里面,有定义[5条/页]显示规则的数据,这个数据格式是个数字数组。
为了让现实分页显示&&功能都能够正常,需要前端初始化手动定义设置:默认为后台定义的数字数组的第一个 值,也就是数组第一项5,如下图所示。
即:如上图箭头所示。
注意:
再结合下面的代码pageform.pageSize的设置,你就应该可以理解了。
我一开始没有这么设置,直接导致显示的效果不正常。
export default {
name: 'searchMain',
data() {
return {
// 分页插件
pageform: {
total: 200, // 总条目数
pages: 5, // 总页数
pageNum: 1, // 当前的页码
pageSizes: [5,10,15,20,30,40,50], // select选项设置:条/页
pageSize: 5, // 每页显示条目个数
navigateFirstPage: 1, // 上一页
navigateLastPage: 3, // 下一页
lastPage: false, // 是最后一页?
firstPage: false, // 是第一页?
hasNextPage: true, // 有下一页?
hasPreviousPage: true // 有上一页?
},
}
},
methods: {
/* 分页插件 */
// pageSize (每页显示条目个数)改变时会触发
pageSizeChange(val,e,form,jobExpLabel,pageform,searchVal) {
// console.log('每页'+val+'条');
this.pageform.pageSize = val;
console.log("设置:"+this.pageform.pageSize+"条/页");
// this.getresume();
this.conditionalQueryAxiosFun();
},
// pageNum (当前页数)改变时会触发
pageCurrentChange(val,e,form,jobExpLabel,pageform,searchVal) {
// console.log('当前页:'+ val);
this.pageform.pageNum = val;
console.log("当前页数:"+this.pageform.pageNum);
// this.getresume();
this.conditionalQueryAxiosFun();
},
}
// 条件查询 异步请求
conditionalQueryAxiosFun(e,form,jobExpLabel,pageform,searchVal){
// · 省略 · 大部分前端页面收集数据&&处理 · 省略 · 不再赘述
axios.post( serverPath + '/searchResume/',
{
"fuzzySearch": this.searchVal, // 搜索文本框 取值
// 右侧边栏:条件查询
"jobIntention": this.form.jobHot, //房产销售
"location": this.form.radioarea, //经开区
// 工作经验
"startSeniority": jobStart,
"endSeniority": jobEnd,
// 薪资
"startSalaryExp": payStart, // this.form.payLow
"endSalaryExp": payEnd, // this.form.payHigh
// 教育经历
"startEducation": eduStart, // this.form.educationLow
"endEducation": eduEnd, // this.form.educationHigh
"sex": sexStart,
// 求职状态
"wantedState": this.form.checkVal,// [1,2,3]
/* 分页组件API对接 */
"total": this.pageform.total, // 总条目数
'pageNum': this.pageform.pageNum, // 当前页码
'pageSizes': this.pageform.pageSizes, // select选项设置:条/页
'pageSize': this.pageform.pageSize, // 每页显示条目数
"pages": this.pageform.page, // 总页数
"navigateFirstPage": this.pageform.navigateFirstPage, // 上一页
"navigateLastPage": this.pageform.navigateLastPage, // 下一页
"lastPage": false, // 是最后一页?
"firstPage": false, // 是第一页?
"hasNextPage": true, // 有下一页?
"hasPreviousPage": true // 有上一页?
},
{
headers: {
'Content-Type':'application/json',
'Authorization': key
}
},
)
.then(function (response) {
if (response.data.code == "2050"){
/*
this.$message({
type: 'warning',
message: response.data.message
});
*/
this.$alert(response.data.message, '提示', {
confirmButtonText: '确定',
type: 'warning',
callback: action => {
this.$message({
type: 'warning',
message: '更换查询条件试试'
});
}
});
$("#cardbox").hide();
$(".pageturn").hide();
}
if (response.data.code == "200"){
this.$message({
type: 'warning',
message: response.data.message
});
$("#cardbox").show();
$(".pageturn").show();
this.resumes = response.data.data.resumes;
/* 同步初始化渲染:分页组件渲染 */
// 获取分页数据
this.pageInfo = response.data.data.pageInfo;
// 获取分页数据之后,立刻渲染
this.pageform.pageSizes = this.pageInfo.pageSizes;
this.pageform.pageSize = this.pageInfo.pageSize;
this.pageform.pageNum = this.pageInfo.pageNum;
this.pageform.total = this.pageInfo.total;
this.pageform.pages = this.pageInfo.pages;
}
localStorage.setItem("token",response.headers.authorization); // token 复写本地 localStorage
}.bind(this))
.catch(function (error) {
// this.$message({
// type: 'success',
// message: "请求失败"+error
// });
});
}
}
四、将服务端返回的data数据进行同步初始化渲染
结合上面的代码,你会发现,最后一步就是:页面需要将服务端返回的data数据进行同步初始化渲染。
五、作者自留·备注:
具体文件代码,参考对应项目文件:src/component/search/searchMain.vue
文件
以上就是关于“ elementUI 分页组件的使用 - 踩坑篇 ” 的全部内容。