Element-UI分页组件连续点击后页码循环跳转问题解决方案
2017-11-29 10:22
1961 查看
我在项目中发现当分页组件的总页数比较大的时候(数量级在十万到百万左右),若连续多次快速点击页码,分页组件会出现循环跳转的情况。
效果图如下所示:
说一下出现这个现象的原因!
我的组件代码如下:
<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方法中的页码接收变量是同一个!!!正是因为使用了同一个变量,在快速点击页面时,可能由于异步操作造成了死循环,导致了这一问题。具体是怎么产生这个问题的,希望各位大牛能够在评论区解释一下,谢谢。
相关文章推荐
- element-UI实现分页器切换页码后,点击某行就行跳转,希望返回后,页码还是保持在刚才浏览的位置
- Element Ui 中 nav组件使用子路由跳转遇到的
- 前端踩坑小结:当elementui的el-dialog组件中包含子组件时,用refs调用子组件时的undefined问题
- 关于跳转到空白页面进行新浪微博分享,当点击取消保存到草稿时无法监听,返回空白页问题的解决方案
- JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案
- (转)AspNetPager查询分页问题(点击页码,不再是查询后的数据集)viewstate解决
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- [置顶] 基于element-ui封装的分页组件,功能齐全。
- DWZ框架的分页组件点击不反应的问题
- BootStrap学习笔记(二):关于分页组件中<a>标签disable后还是可以点击的问题
- 关于element-ui popover组件通过数据渲染出多个popover时点击取消时 popover的显示与隐藏问题
- 解决使用elementUI框架el-upload上传组件时session丢失问题
- BootStrap3 笔记(一):关于分页组件中<a>标签disable后还是可以点击的问题
- 在使用element ui时 时间组件获取时间格式问题
- listview里面装了别的组件导致item点击无效问题的解决方案
- AspNetPager查询分页问题(点击页码,不再是查询后的数据集)viewstate解决
- hibernate(jpa)根据实体动态生成查询条件,并实现分页问题的解决方案
- 【vue 组件 mint-ui】 看了一下源码,给轮播图Swiper封装自定义跳转的函数
- 软键盘点击确定按钮循环调用两次的问题解决
- vue+elementUI 关于日期选择器的disabledDate问题