Element-UI踩坑之Pagination组件的使用


Posted in Javascript onOctober 29, 2018

先说结论:在改变pageSize时,若当前的currentPage超过了最大有效值,就会修改为最大有效值。

一般Pagination组件的声明如下:

<el-pagination 
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :page-size="pageSize" 
 :current-page="currentPage"
 :total="total"
 :page-sizes="[10, 20, 50, 100, 200, 300, 400]" 
 layout="total, sizes, prev, pager, next, jumper">
</el-pagination>

数据都是异步获取的,所以会定义一个获取数据的方法:

getData() {
 const params = {
 pageSize: this.pageSize,
 currentPage: this.currentPage
 };

 get(params).then(res => {
 if (res.status === 0) {
 ...
 this.total = res.result.count;
 }
 });
}

一般我们会在pageSize或currentPage改变时,再次去获取新数据:

handleSizeChange(val) {
 this.pageSize = val;
 this.getData();
},
handleCurrentChange(val) {
 this.currentPage = val;
 this.getData();
}

以上都符合常理,看起来没什么问题!但是,来看以下这种特殊情况:

假设有473条数据,即total = 473

当前pageSize = 10, pageCount = Math.ceil(473 / 10) = 48, currentPage = 48

现在将pageSize = 200,则pageCount = Math.ceil(473 / 200) = 3

这时奇怪的事情就发生了,首先页面的表现为:先是无数据,然后过一会数据才加载。

打开控制台查看网络请求,发现获取了两次数据!

查看请求参数,第一次为:pageSize: 200, currentPage : 48

第二次为:pageSize: 200, currentPage: 3

这好像可以解释了,为什么请求了两次数据?因为pageSize与currentPage的改变都会触发事件去请求数据。

但是!pageSize是我们手动改变的,那currentPage呢?

查看整个组件内可能触发currentPage的行为,但并没有。

那只有一种可能,就是Element-UI库内部帮我们修改的!

秉着不求甚解的理念,去查看了Element-UI中Pagination组件的源码:

其中currentPage在Pagination组件内叫 internalCurrentPage

watch: {
 internalCurrentPage: {
 immediate: true,
 handler(newVal, oldVal) {
 newVal = parseInt(newVal, 10);

 /* istanbul ignore if */
 if (isNaN(newVal)) {
  newVal = oldVal || 1;
 } else {
  // 注意这里 
  newVal = this.getValidCurrentPage(newVal);
 }

 if (newVal !== undefined) {
  this.internalCurrentPage = newVal;
  if (oldVal !== newVal) {
  this.$emit('currentPage', newVal);
  }
 } else {
  this.$emit('currentPage', newVal);
 }
 }
 }
}

注意我注释标明的地方:

newVal = this.getValidCurrentPage(newVal)

方法名getValidCurrentPage,顾名思义 获取有效的当前页

以上两点足以证明,Element-UI中的Pagination组件会修改currentPage为一个有效值!

具体看看getValidCurrentPage方法的实现:

getValidCurrentPage(value) {
 value = parseInt(value, 10);
 
 const havePageCount = typeof this.internalPageCount === 'number';

 let resetValue;
 if (!havePageCount) {
 if (isNaN(value) || value < 1) resetValue = 1;
 } else {
 if (value < 1) {
  resetValue = 1;
 } else if (value > this.internalPageCount) {
  // 注意这里
  resetValue = this.internalPageCount;
 }
 }

 if (resetValue === undefined && isNaN(value)) {
 resetValue = 1;
 } else if (resetValue === 0) {
 resetValue = 1;
 }

 return resetValue === undefined ? value : resetValue;
 }

重点看这句代码:

else if (value > this.internalPageCount) {
 resetValue = this.internalPageCount;
}

这里就是我们遇到的特殊情况,在改变pageSize时,若当前的currentPage超过了最大有效值,就会修改为最大有效值!

其实Element-UI修改的说法并不正确,它只是向上派发了事件,最终修改值的是我们自己。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习基础知识小结
Nov 25 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 #Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 #Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
Ext 今日学习总结
2010/09/19 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js 上传图片预览问题
2010/12/06 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
编写React组件项目实践分析
2018/03/04 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python3模拟登录操作实例分析
2019/03/12 Python
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
提拔干部考察材料
2014/05/26 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
2015年工程师工作总结
2015/04/30 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android