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

最新推荐文章于 2024-10-21 13:33:12 发布

流年＊痕迹

最新推荐文章于 2024-10-21 13:33:12 发布

阅读量2.9k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_52007839/article/details/113646785

版权

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
      }
      //以下写其他逻辑
 }