Vxe-table组件库中分页组件vxe-pager每页显示条数的bug

最新推荐文章于 2025-10-23 16:53:52 发布

原创最新推荐文章于 2025-10-23 16:53:52 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个 Vxe-table 分页组件中的 bug，当每页显示条数变化时，若当前页不存在，会导致数据请求错误。文章提供了一个修正逻辑，确保正确请求数据。

Vxe-table组件库中分页组件vxe-pager每页显示条数的bug

代码

代码

<vxe-pager
   @page-change="getList"
   :current-page.sync="pageConfig.currentPage"
   :page-size.sync="pageConfig.currentSize"
   :total="pageConfig.total"
   :layouts="['Total','PrevJump', 'PrevPage', 'Number', 'NextPage', 		'NextJump', 'FullJump','Sizes']">
 </vxe-pager>

当分页组件发生变化时，会触发getList获取最新数据；
当当前页在第10页，pagesize由原来10变为100，会请求第10页的数据，此时并没有，所以需要在getList中修正currentPage，

getList(pageChange) {
 if(pageChange && pageChange.type === 'size'){
    let reviseCurrentPage = Math.ceil(this.pageConfig.total/this.pageConfig.currentSize)
    this.pageConfig.currentPage = pageChange.currentPage > reviseCurrentPage?reviseCurrentPage:pageChange.currentPage
      }
      //以下写其他逻辑
 }