Element UI 之 Pagination 分页切换size请求两次接口BUG

测试组测出来的分页BUG啊啊啊!不想看废话的直接下拉到最后~
在这里插入图片描述
   当前page是最后一页(40),切换size(40),显示没有数据???不信邪又试了几次,时而好使时而不好使…在这里插入图片描述
   既然出了问题,咱就来好好分析分析,打开控制台瞅一瞅,接口调用了两次!两次! 分别是 handleSizeChange()handleCurrentChange()

  • 切换size调用一次,此时传到后端是size:40 page:40
  • 当前page变化再次调用接口,size:40 page:10

   打开后端再看一看,竟然先返回了 handleCurrentChange() 的结果!这时是有数据的,紧接着又返回了 handleSizeChange() 的结果,总共也才 400 条数据,40×40肯定为空啊!!空空空如也~

解决方案:给fetchData()添加定时器,完美解决

handleSizeChange(val) {
	this.pageSize=val
    setTimeout(() => { this.fetchData() }, 0) // 刷新数据 !!!
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
以下是使用Vue3和Element UI实现分页的示例代码: ```vue <template> <div> <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" /> </div> </template> <script> import { ref } from 'vue'; import { ElPagination } from 'element-plus'; export default { components: { ElPagination, }, setup() { const currentPage = ref(1); const pageSize = ref(10); const total = ref(0); function handleCurrentChange(val) { currentPage.value = val; fetchData(); } function handleSizeChange(val) { pageSize.value = val; currentPage.value = 1; fetchData(); } function fetchData() { // 在这里发起请求获取分页数据 // 请求参数包括 currentPage.value 和 pageSize.value // 请求成功后更新 total.value 和分页数据 } fetchData(); return { currentPage, pageSize, total, handleCurrentChange, handleSizeChange, }; }, }; ``` 在这个示例中,我们使用了Vue3的Composition API来管理组件状态。我们使用了`ref`函数来创建响应式变量,这些变量包括当前页码、每页显示的条目数和总条目数。我们还使用了Element UI的`ElPagination`组件来渲染分页器,并监听了`current-change`和`size-change`事件来处理页码和每页显示条目数的变化。在`handleCurrentChange`和`handleSizeChange`函数中,我们更新了当前页码和每页显示条目数,并重新发起了请求获取分页数据。在`fetchData`函数中,我们可以发起请求获取分页数据,并更新总条目数和分页数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zoriah

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值