问题复现

当分页数据足够多的情况下，将分页接入api（api返回值需要重新赋值分页参数），频繁触发分页的下一页。

问题原因

当我们频繁点击下一页的时候，因为会请求api,在api未返回数据的时候，触发下一页，导致接口又触发。当api结果返回时，因为会重新赋值分页，也就造成了，分页的值改变，从而又触发了api。

解决

    handleCurrentChange(val) { // 分页切换（原）this.$emit('pagination', { page: val, limit: this.pageSize })}// 修改为 新增节流限制，这样用户短时间内频繁切换，只会触发一次对应的api请求handleCurrentChange: debounce(function (val) {this.$emit("pagination", { page: val, limit: this.pageSize });}, 500),

element-ui Pagination 分页频繁切换导致重复触发api问题相关推荐

element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式直接显示首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页可能会导致后端elk崩溃.项目最后要求不能把 ...
[vue] EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？
[vue] EventBus注册在全局上时,路由切换时会重复触发事件,如何解决呢? 建议在created里注册,在beforeDestory移出个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃 ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
element ui +mybatisPlus分页插件实现分页功能
elementui pagination插件当然这里的依赖部分就需要去创库ctrl+v了 <!--分页部分 pagination插件 @current-change="handlep ...
element ui实现分页时候如何不从1序号开始
举个栗子,加入我们一页table表格是10行,分页到第二页时候我们想从11开始而不是1,这时候我们就可以这样做(如下图片),里面数字10是根据自己分页器:page-sizes="[10]&q ...
element -UI升级，使用el-tabs导致浏览器卡死问题
elementUI升级踩坑项目维护开发时要用到elementUI的某些组件,发现当前项目element-ui版本过低,无法使用,打算升级一下, 所以用npm update element-ui 升级 ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
上下文切换频繁，导致load average 过高
转载记录一下,方便后面用到时方便查看. 进程上下文频繁切换导致load average过高 2016年6月26日admin发表评论阅读评论一.问题现象现网有两台虚拟机主机95%的cpu处于idle ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

element-ui Pagination 分页频繁切换导致重复触发api问题

Pagination频繁切换导致重复触发api问题

问题复现

问题原因

解决

element-ui Pagination 分页频繁切换导致重复触发api问题相关推荐

最新文章

热门文章