欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Element-UI踩坑之Pagination组件的使用

程序员文章站 2023-11-30 11:28:04
先说结论：在改变pagesize时，若当前的currentpage超过了最大有效值，就会修改为最大有效值。 一般pagination组件的声明如下：

先说结论：在改变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修改的说法并不正确，它只是向上派发了事件，最终修改值的是我们自己。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 傻瓜式解读koa中间件处理模块koa-compose的使用

下一篇： vue通过style或者class改变样式的实例代码

推荐阅读