解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题
前言
上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!
bug:vue和element实现的后台分页,当前是第二页,点击搜索,强制设置current-page为1,但是当前页还是第二页没有改变。
解决方法
如何使用分页就不说了,可以参考上一篇的前台解决分页
页面 el-pagination v-if="pageshow"
操作
这里element的分页有个bug,就是在搜索过后的当前页数据变化了,原本的分页当前页并不会改变,这就会遇见一个问题,首次展示停留在第5页,搜索过后的数据并没有5页,不论前台分页或后台分页,页面都会展示:暂无数据! 但其实是有数据的,只是额没有第五页的数据。所以在搜索的时候将当前页设置为1。
使用v-if绑定数据,当每次搜索的时候就注销掉前一个分页Dom,画面刷新完毕后,渲染一个同样的分页,重新渲染必须放到$nextTick中,这样在使用分页就不会出现问题了。
search是一个方法在methods中,调用的时候@click="search"绑定到 搜索按钮上 就可以了
解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题的更多相关文章
- Element分页组件prev-text和next-text属性无效?
前情提要 /(ㄒoㄒ)/~~ 作为刚刚接触 Element 组件的人来说,看文档是第一步,但是当我想要修改分页组件里面的按钮时却遇到了问题. 文档中写到是需要给 prev-text 和 next-te ...
- vue-cli3 element 分页组件el-pagination的基本使用
<!--分页组件--> <el-pagination :total="total" :current-page="currentPage" : ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- Easyui datagrid 修改分页组件的分页提示信息为中文
datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...
- 基于Vue的简单通用分页组件
分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...
- asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
- DRF框架(八)——drf-jwt手动签发与校验、搜索过滤组件、排序过滤组件、基础分页组件
自定义drf-jwt手动签发和校验 签发token源码入口 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口,不然进不了登录页面 获取提交的username ...
- 小程序报错Do not have xx handler in current page的解决方法
看到小程序这一大串的“Do not have bindName handler in current page: pages/card/card. Please make sure that bind ...
随机推荐
- iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式
目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...
- RN相关命令
添加第三方库 npm install --save xxx react-native link 链接库 react-native react-native -v 查看RN版本 npm info re ...
- 使Excel中单元格内英文为Arial Narrow 中文为宋体显示打印
因为在对数据表进行排版格式整理的时候,发现Arial Narrow字体是不支持中文的,所以中文默认为宋体,但是显示出来却不是宋体,需要双击单元格中文才显示为宋体,这样打印出来才为宋体 但是如果有很多单 ...
- sql 特殊时间值 第一天或最后一天 无计算错误
DECLARE @dt datetimeSET @dt=GETDATE() DECLARE @number intSET @number=3 --1.指定日期该年的第一天或最后一天--A. 年的第一天 ...
- github代码推送
git init // 初始化版本库 git add . // 添加文件到版本库(只是添加到缓存区),.代表添加文件夹下所有文件 git commit -m "first commit&qu ...
- 2018-12-25-C#-7.2-通过-in-和-readonly-struct-减少方法值复制提高性能
title author date CreateTime categories C# 7.2 通过 in 和 readonly struct 减少方法值复制提高性能 lindexi 2018-12-2 ...
- HttpServlet中service方法的源码解读
前言 最近在看<Head First Servlet & JSP>这本书, 对servlet有了更加深入的理解.今天就来写一篇博客,谈一谈Servlet中一个重要的方法-- ...
- Cats Transport
Cats Transport 现在有n座山,第i座山的坐标为\(d_i\),初始p个饲养员在山1,有m只猫,每只猫有一个属性\(h_i,t_i\)表示猫i 在\(h_i\)以及它在\(t_i\)时间后 ...
- leetcode-5-最长回文子串*马拉车
方法一:动态规划 O(n2) O(n2) class Solution: def longestPalindrome(self, s: str) -> str: size = len(s) if ...
- jquery选择器中中>和空格的区别
空格:$('parent childchild')表示获取parent下的所有的childchild节点 大于号:$('parent > childchild')表示获取parent下的所有下一 ...