前言
上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!
bug:vue和element实现的后台分页,当前是第二页,点击搜索,强制设置current-page为1,但是当前页还是第二页没有改变。

解决方法
如何使用分页就不说了,可以参考上一篇的前台解决分页

页面 el-pagination v-if="pageshow"


<div class="pagination-container">
    <el-pagination v-if="pageshow" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQue        ry.page" :page-size="listQuery.rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</div>
 

操作
这里element的分页有个bug,就是在搜索过后的当前页数据变化了,原本的分页当前页并不会改变,这就会遇见一个问题,首次展示停留在第5页,搜索过后的数据并没有5页,不论前台分页或后台分页,页面都会展示:暂无数据! 但其实是有数据的,只是额没有第五页的数据。所以在搜索的时候将当前页设置为1。
使用v-if绑定数据,当每次搜索的时候就注销掉前一个分页Dom,画面刷新完毕后,渲染一个同样的分页,重新渲染必须放到$nextTick中,这样在使用分页就不会出现问题了。
search是一个方法在methods中,调用的时候@click="search"绑定到 搜索按钮上 就可以了

handleFilter() {
  this.listQuery.page = 1
  this.pageshow = false
  this.getList();
  this.$nextTick(() => {
    this.pageshow = true
  })
},

解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题的更多相关文章

  1. Element分页组件prev-text和next-text属性无效?

    前情提要 /(ㄒoㄒ)/~~ 作为刚刚接触 Element 组件的人来说,看文档是第一步,但是当我想要修改分页组件里面的按钮时却遇到了问题. 文档中写到是需要给 prev-text 和 next-te ...

  2. vue-cli3 element 分页组件el-pagination的基本使用

    <!--分页组件--> <el-pagination :total="total" :current-page="currentPage" : ...

  3. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  4. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  5. Easyui datagrid 修改分页组件的分页提示信息为中文

    datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...

  6. 基于Vue的简单通用分页组件

    分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...

  7. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  8. DRF框架(八)——drf-jwt手动签发与校验、搜索过滤组件、排序过滤组件、基础分页组件

    自定义drf-jwt手动签发和校验 签发token源码入口 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口,不然进不了登录页面 获取提交的username ...

  9. 小程序报错Do not have xx handler in current page的解决方法

    看到小程序这一大串的“Do not have bindName handler in current page: pages/card/card. Please make sure that bind ...

随机推荐

  1. Detours的使用准备

    Detours是微软开发的一个函数库,可用于捕获系统API.在用其进行程序开发之前,得做一些准备工作: 一.下载Detours 在http://research.microsoft.com/sn/de ...

  2. Thread状态

  3. Restoring Road Network Floyd

    问题 C: Restoring Road Network 时间限制: 1 Sec  内存限制: 128 MB提交: 731  解决: 149[提交] [状态] [讨论版] [命题人:admin] 题目 ...

  4. 2016CCPC杭州现场赛 B-Bomb /// tarjan缩点

    题目大意: 给定n个爆破点的信息 x y r w 表示爆破点位置为 (x,y) 爆破范围是以位置为圆心 半径为r的圆 引爆这个点的代价为w 引爆某个点时 其他位置在该爆破范围内的爆破点也会被引爆 求引 ...

  5. 【POJ】1797 Heavy Transportation

    题目链接:http://poj.org/problem?id=1797 题意:n个城镇,m条路上能承载的最大重量.现在问你从1到n的最大承重量. 题解:spfa的变体. 假设当前1->当前点的承 ...

  6. 初探.Net Core API 网关Ocelot(一)

    一.介绍 Ocelot 是基于.NetCore实现的开源的API网关,支持IdentityServer认证.Ocelot具有路由.请求聚合.服务发现.认证.鉴权.限流熔断等功能,并内置了负载均衡器与S ...

  7. 8_InlineHook

    1 shellcode低2Gb警告.应使用高2GB 稳定 : 在内核挂钩子: 由于每个进程的低2gb 的数据是不同的:所以 在内核挂钩子 因该把 代码 放在 高 2gb. 方法1(申请): 比如 使用 ...

  8. K8S之集群搭建

    转自声明 ASP.NET Core on K8S深入学习(1)K8S基础知识与集群搭建 1.K8S环境搭建的几种方式 搭建K8S环境有几种常见的方式如下: (1)Minikube Minikube是一 ...

  9. Neo4j 因果集群搭建及neo4j-java-driver连接

    搭建Neo4j因果集群 1.下载企业版,当前是3,5,9版本 https://neo4j.com/download-center/#enterprise 2.配置,三个核心集群为例 配置文件,conf ...

  10. Erlang学习记录:输入和输出

    输入和输出 输入和输出功能都被定义在io模块 输出功能非常常用,由于erlang项目没有可断点调试的IDE(或者说根本不需要),所以所有的调试操作都是由io输出 来调试的 io:get_line/1. ...