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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
模拟xcopy的函数
2006/10/09 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python实现字符串和字典的转换
2018/09/29 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
90后毕业生的求职信范文
2013/09/21 职场文书
公司活动策划方案
2014/01/13 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
趣味运动会策划方案
2014/06/02 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL