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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
JS出现失效的情况总结
Jan 20 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 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函数代码
2013/08/29 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
python动态网页批量爬取
2016/02/14 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
临床医学应届生求职信
2013/11/06 职场文书
网络工程师职业规划
2014/02/10 职场文书
《童年》教学反思
2014/02/18 职场文书
团队精神的演讲稿
2014/05/14 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
鲁迅故居导游词
2015/02/05 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS