我在项目中发现当分页组件的总页数比较大的时候(数量级在十万到百万左右),若连续多次快速点击页码,分页组件会出现循环跳转的情况。
效果图如下所示:
说一下出现这个现象的原因!
我的组件代码如下:
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryData.pageNumber"
:page-sizes="[10, 20, 30, 40]"
page-size="queryData.pageSize"
layout="total, prev, pager, next, jumper"
:total="queryData.totalRow">
</el-pagination>
handleCurrentChange代码如下:(这个方法是页面出现变化时的回调函数)
handleCurrentChange(val) {
let $this = this;
$this.queryData.pageNumber = val;
$this.doQueryData();
console.log(`当前页: ${val}`);
}
可以看到,我在组件中的current-page与handle方法中的页码接收变量是同一个!!!正是因为使用了同一个变量,在快速点击页面时,可能由于异步操作造成了死循环,导致了这一问题。具体是怎么产生这个问题的,希望各位大牛能够在评论区解释一下,谢谢。