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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
Js sort排序使用方法
Oct 17 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
JS实现日期加减的方法
Nov 29 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
从零学习node.js之文件操作(三)
Feb 21 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中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
js实现网页随机验证码
2020/10/19 Javascript
python encode和decode的妙用
2009/09/02 Python
详解Python中的__init__和__new__
2014/03/12 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python两种注释用法的示例
2020/10/09 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
大学生创业计划书的用途
2014/01/08 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
大学运动会加油稿
2015/07/22 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle