elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面：（踩坑一则）

因每个公司 / 每个项目 / 客户需求 / 都各有差异，所以本例只是demo说解，并非举一反三或万能分页；
但是传统的客户需求还是完全能够通用和满足的。

一、分页效果图

二、elementUI 分页组件的使用 - 应用篇


<!-- 分页组件 -->
<div class="pageturn"><el-paginationbackground@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}} 页 &nbsp;&nbsp; 上一页是第:{{pageform.navigateFirstPage}} 页 &nbsp;&nbsp; 下一页是第:{{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 分页组件的使用 - 踩坑篇 ” 的全部内容。

elementUI 分页组件的使用 - 踩坑篇相关推荐

elementUI组件el-dropdown - 踩坑篇
选择即改变:click选择哪个,就显示当前的值,页面UI显示并伴随css样式的变化. 重点:v-if 和 v-else-if 的搭配使用,缺一不可. 效果图: 正确的代码如下: 重要提示: 我之前使用 ...
vantUI组件：van-card 自定义内容 - 踩坑篇
vantUI组件:van-card 自定义内容 - 踩坑篇特别说明: 自定义用法,格式必须: <van-card> <template #tags> ····自定义内容·· ...
vantUI组件：获取验证码 - 踩坑篇
vant 的button组件:(发送验证码)按钮点击没反应? 应用场景 · 前戏: 效果图解说: 代码公示: <van-fieldv-model="sms"centercle ...
MUI 宫格组件（grid）怎么取消mui-active背景色？（优先级设置问题）- 踩坑篇
MUI 宫格组件(grid)怎么取消mui-active背景色?(优先级设置问题) 对比 · 截图如下: 踩坑总结 · 点击取消效果 · 举例: 优先级: background > backgr ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
Mint-UI框架router-link返回上一页的方法 - 踩坑篇
使用mint-ui框架的header导航组件,<router-link to="">如何实现点击返回上一页? 代码如下: <template><!-- ...
vantUI 弹出层（轻提示）案例 - 踩坑篇
vantUI 弹出层(轻提示)- 踩坑篇可自定义项: 显示时长显示内容显示何时消失代码 · 实例: if(this.checkedAgreement == false){this.$toast
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
el-radio（自定义样式）获取选中label值 + 选中状态 + 拼接String + post提交 - 踩坑篇
疑问: vue中怎么获取radio的选中值 .选中状态? 效果图 · 截图: 注意点: 需要使用 label传值,后台接什么,你就传什么 (这个需要和后台事先确定好) 使用@change事件,监听鼠标 ...

elementUI 分页组件的使用 - 踩坑篇

elementUI 分页组件的使用、API调用、获取服务端数据、并初始化渲染页面：（踩坑一则）

一、分页效果图

二、elementUI 分页组件的使用 - 应用篇

三、注意：

注意：

四、将服务端返回的data数据进行同步初始化渲染

五、作者自留·备注：

elementUI 分页组件的使用 - 踩坑篇相关推荐

最新文章

热门文章