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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
Swiper自定义分页器使用详解
2017/12/28 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python通过poll实现异步IO的方法
2015/06/04 Python
python实现飞机大战小游戏
2019/11/08 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
python实现FTP循环上传文件
2020/03/20 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
大学自主招生自荐信范文
2014/02/26 职场文书
主办会计岗位职责
2014/03/13 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
圣诞节开幕词
2015/01/29 职场文书
保研推荐信范文
2015/03/25 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang