条件分页查询小Bug——查询条件更变后，总页数少于当前页数时，无数据显示

最新推荐文章于 2024-05-09 11:15:24 发布

原创

最新推荐文章于 2024-05-09 11:15:24 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

在使用Vue.js和Element分页插件的前端环境中，当查询条件从空变为非空，导致总页数减少，若当前页数超过新的总页数，页面将显示无数据。解决方案是监听查询条件对象，当条件改变时设置查询页数为1，确保始终从第一页开始查询。

前端环境：vue2.5 element分页插件

bug描述:
查询条件为空时，总记录数100：totalPages =10 csurrentPage=10
如加上查询条件：name=“str”，总记录数变为20，totalPages=2
点击查询，虽然查到20条记录，但由于当前页数为10，显示没有数据

解决办法：
监听查询条件对象，当值发生变动，flag=true
点击查询先判断flag值
如flag=true则设置查询页数为1
解决~

代码片段：

 <!-- 分页条 -->
    <el-pagination
      @size-change="getAllCourse"
      @current-change="getAllCourse"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total,prev, pager, next, jumper"
      style=