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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python实现单词拼写检查
2015/04/25 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python执行精确的小数计算方法
2019/01/21 Python
详解python中@的用法
2019/03/27 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python如何对齐字符串
2020/07/30 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
总经理助理岗位职责
2013/11/08 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
料理师求职信
2014/01/30 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
交通事故责任认定书
2015/08/06 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL