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 计算当天是本年本月的第几周
Mar 22 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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
Smarty模板快速入门
2007/01/04 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
Augularjs-起步详解
2016/07/08 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python变量的作用域是什么
2020/05/26 Python
个人简历自我鉴定
2013/10/11 职场文书
入团者的自我评价分享
2013/12/02 职场文书
益达广告词
2014/03/14 职场文书
中国好声音广告词
2014/03/18 职场文书
《将心比心》教学反思
2016/02/23 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android