1.描述：

使用element pagination组件时，如果你的currentPage在靠后的页数，这时改变pageSize，那么可能导致size-change和current-change事件同时被触发，如果你的数据请求直接或间接使用这两个事件回调进行，且没有进行任何处理，那么自然便会发送两次网络请求。

2.代码解决：

我只需要一个分页事件，因此没有直接使用size-change和current-change，而是集中放在了一个自定义事件pagination里。但是其他场景思路也是完全一样的。

以下是伪代码：

<template><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize":total="total":page-sizes="[10, 20, 30, 50, 200, 1000, 2000]"layout="total, sizes, prev, pager, next, jumper"background>
</template><script>
data() {return {//把currentPage、pageSize保存在pagination对象里pagination: {currentPage: this.currentPage,pageSize: this.pageSize,}};
},props: {currentPage: String,pageSize: String
}watch: {pagination: {handler({currentPage, pageSize}) {//如果当前页超出最大页数，则不emit事件let maxPage = Math.ceil(this.total / pageSize)if (currentPage > maxPage) returnthis.$emit('pagination', {currentPage, pageSize})},deep: true}
},methods: {handleSizeChange(pageSize) {this.pagination.pageSize = pageSizethis.$emit("sizeChange", pageSize);},handleCurrentChange(currentPage) {this.pagination.currentPage = currentPagethis.$emit("currentChange", currentPage);},
}
</script>

3.分析：

这个问题本不应该存在的，其他组件库都是把分页事件放在一个pagination事件里，这不是什么难事，如果你了解pagination组件封装的话。比如quasar自带的组件库、antd：

element却没有一个这样的事件，且分出size-change和current-change这两个事件来也没有太大意义，因为这两个事件不会比一个pagination事件能多干什么事情。但这也不是什么大问题。

出现这个问题，是因为改变了pageSize，最大页数（下面叫maxPage）也会改变。

这分两种情况，一种是pageSize变小，这显然不会有什么坏的影响，element对于这种情况做的是保持currentPage不变。

另一种情况，是pageSize变大，即maxPage变小，这时如果currentPage没有超出maxPage，那么element对于这种情况做的是也是保持currentPage不变。但是如果currentPage超出了maxPage，那么element就会把maxPage赋值给currentPage，同时size-change和current-change这两个事件都会触发。

所以你最好不要在size-change和current-change这两个事件的回调里都发请求，而是封装一下，只$emit一个类似于“pagination”这样的event。

现在的问题在于，如何在出现pageSize变大这种情况下，利用size-change和current-change这两个事件，拿到currentPage、pageSize，但只emit一次pagination event。

关键在于，改变pageSize，maxPage也随之改变了，所以需要判断是否要改变currentPage，因为可能出现currentPage大于maxPage的情况，这是不对的，所以只需要判断下if (currentPage > maxPage) return即可

vue：element ui分页改变pageSize，触发两次回调请求相关推荐

vue+element UI分页的使用方法
这篇仅对于刚入行前端的小伙伴,大佬勿喷,技术比较菜,哪里写的不对也请指正首先第一步当然少不了我们的分页组件 <el-pagination:current-page="page_opt ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...

vue：element ui分页改变pageSize，触发两次回调请求

1.描述：

2.代码解决：

3.分析：

vue：element ui分页改变pageSize，触发两次回调请求相关推荐

最新文章

热门文章