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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
详解JavaScript作用域 闭包
Jul 29 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
Zend 输出产生XML解析错误
2009/03/03 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
详解webpack babel的配置
2018/01/09 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python匿名函数及应用示例
2019/04/09 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
Python bytes string相互转换过程解析
2020/03/05 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
大学四年规划书范文
2013/12/27 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
重阳节标语大全
2014/10/07 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
创业计划书之游泳馆
2019/09/16 职场文书