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

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

前端环境: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
根据提供的引用内容,可以看出分页页数在不同情况下会有不同的设置和呈现方式。根据引用,可以使用Vue框架的`v-if`指令来控制分页组件的显示。在mounted生命周期钩子函数中,将`pageshow`设置为`true`,即可在渲染Pagination组件时获取到`currentPage`并显示高亮的页码。引用中也提到了在从详情页返回时,需要重新设置`currentPage`的值,并重新请求数据。根据不同的情况设置`currentPage`,可以保证高亮显示正确的页码。由于有提供具体的代码和数据,无法确定实际的页数。但是根据这些引用内容,可以推断出所使用的分页组件可以根据搜索条件数据的不同来设置页数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue element Pagination分页当前页bug](https://blog.csdn.net/qq_40314234/article/details/102797283)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [jQuery pagination分页示例详解](https://download.csdn.net/download/weixin_38675341/12950572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值