elementui el-pagination分页组件查询的时候当前页不更新

最新推荐文章于 2023-12-15 15:05:01 发布

前端鼓励师

最新推荐文章于 2023-12-15 15:05:01 发布

阅读量1.7k

点赞数 6

分类专栏： elementsui 文章标签： elementui javascript vue.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_45506717/article/details/124428644

版权

elementsui 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了在Vue中使用ElementUI的el-pagination分页组件时遇到的一个常见问题：搜索操作后分页的当前页数没有更新。通过在搜索方法中隐藏分页组件并重新渲染解决此bug，详细步骤包括在data中定义分页显示变量，搜索时隐藏分页，以及在接口请求后重新显示分页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui el-pagination分页组件查询的时候当前页不更新

<mypagination v-if="pageshow" :currentPage.sync="pageNum" :pagesize="pageSize" :pagetotal="pageTotal" @pagefunc="pageFunc"></mypagination>

1.需要在data函数里面定义个pageshow

在这里插入图片描述

2.在搜索改变页码的时候加上如下代码

        seach() {
            this._getProbjectList('搜索')
            this.pageshow = false;//让分页隐藏
        },

3.在调用接口请求的时候重新渲染分页

在这里插入图片描述

bug改完了好开心

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端鼓励师

关注关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue开发使用element的el-pagination分页组件

weixin_48596030的博客

05-24

627

实现思路：获取到列表的所有数据，然后对数据进行处理，紧接着操作分页。//切换每页条数容量。

利用el-pagination实现分页效果（只讨论前端部分）

m0_51933554的博客

10-30

454

利用el-pagination实现分页效果（只讨论前端部分）

1 条评论您还未登录，请先登录后发表或查看评论

element-ui 表格修改后, 表格里面的数据不实时更新问题

github_37759996的博客

05-14

4294

element-ui 表格修改后表格里面的数据后页面不实时更新问题完美解想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完，没时间直接看做法6/7）尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功提示：最下面有代码demo 页面初始化：目标效果做法1：给"更多"绑定一个 v-show=‘show’ 把 this.show 设置为true ，点击"更多"按钮后在点击事件里面把this.show 设置为false；结果1：未成

Vue+elementui------ el-pagination分页组件查询的时候当前页不更新----项目积累

飞翔༒之翼

12-15

1221

2.做了一个判断以后就是在点查询按钮的时候让pageNum默认为就好了。1.在加的查询条件中，一般查询按钮是调的列表接口的方法。

无刷新分页 jquery.pagination.js

weixin_33826609的博客

05-19

170

1.使用插件为 jquery.pagination.js ，如果没有这个js文件的话，我可以给发个。首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pa...

利用Jquery中的pagination插件实现无刷新的分页

weixin_34405354的博客

06-09

134

最近在群里，有成员问道了无刷新分页的问题，碰巧前一段时间正好实现了这个功能，而且还在这个基础上增加了自己的一点特制的功能，比如筛选、排序功能。不过今天就先不涉及，先从简单的分页讲起。首先，我们要准备的文件有：jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。先把要用到的...

解决el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题

weixin_50651378的博客

08-24

4589

el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有发生变的问题

jQuery Pagination分页插件--无刷新

weixin_30236595的博客

07-14

145

源码：https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代码版无刷新插件刷新版原理：点页码的时候，我们不再去访问这个页面，而是去访问一般处理程序，把当前页，每页显示的大小，传过去，然后我们去获取数据，然后返回到前台，用js进行处理。（原理理解了，你...

【Vue2 + ElementUI】分页el-pagination 封装成公用组件

最新发布

01-25

在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...

Vue2与ElementUI封装el-pagination分页组件教程

1. 创建分页组件：首先需要创建一个新的Vue组件，这个组件将包含el-pagination的所有基础功能，如当前页码、页面总数、每页显示的条目数等，并提供外部接口用于传递这些参数。 2. 配置插槽：ElementUI的el-...

无刷新分页 pagination

01-04

Jquery 无刷新分页 jquery.pagination.js 带数据库提交Handler请求数据 AJAX

Element-UI 中的el-pagination分页功能

光光探险路

05-18

623

1.功能分页 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="tota

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

kodmoqn的博客

05-07

194

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

vue element分页点击不刷新

Hero_rong的博客

01-13

2151

分页效果如上所示问题：如上图所示，现在点击到第三页了，然后操作列表里面的删除按钮，数据删除，列表重新加载，此时分页应该回到第一页，但是没有原因：用的这个插件，虽然绑定了size-change和 current-change 方法，但是在方法里面并没有实时给页面赋值，换言之，这两个方法里面就算是空的，点击上下页也会跳转，但是如果请求完数据想从第三页回到第一页那就不行了，代码会认为还在当前页面，必须要在这两个方法里面给 currentPage赋值才可以方法：解决方法就是如下...

pagination.js无刷新实现分页

Fly_Cheng的博客

05-10

1143

1.引入 jquery.js(自行下载) jquery.pagination.js(自行下载) pager.js pagination.css(自行下载) pager.js文件 var pageCount = 0; //总页数 var pageIndex = 0; //页面索引初始值 var pageSize = 10; //每页显示条数初始化，修改显

【解决分页el-pagination页面页面不刷新】

limuzhixing的博客

12-15

825

解决分页el-pagination页面页面不刷新

jq分页不刷新页面_jq实现无刷新分页

weixin_39795292的博客

01-14

234

1.没事干在网上看了一个 jq实现无刷新分页的插件，所以自己根据上面所说的写了一个实例来供自己学习。从而更好的掌握。2.所需要引用的js和css文件2.前台html与js代码var pageIndex = 0; //页面索引初始值var pageSize = 10; //每页显示条数初始化，修改显示条数，修改这里即可$(document).read...

el-pagination解决分页不更新的原因及解决方法

qq_40685439的博客

06-29

6550

场景：在分页查询的时候，有时候我们在切换查询条件时，分页的页数还停留在上一次查看的页数，而不是从第一页开始。下图是重新查询的数据，但是页码还停留在第六页（当数据多于六页数据的时候，会显示第六页的数据，但是当数据少于六页数据时，就会显示暂时无数据，其实数据是拿回来的，只是这时候分页器接收到的页码是6，而没有那么多数据显示，就会显示暂无数据） **解决办法：**可以给装分页器的元素添加一个条件渲染，让每次请求时，分页器都重新加载。在请求开始前，把pageshow设为false，请求结束之后，就设为true（

使用el-pagination，页码（current-page）视图不更新

W________11的博客

08-08

1932

后来发现是，在getList的时候，为了偷懒，在发请求之前把分页器绑定的total属性，重置为0，导致分页器组件崩掉了....在网上搜，发现好多人遇到了类似的问题，但是按照他们解决的方法，家人们，别偷懒...

elementui el-pagination分页组件查询的时候当前页不更新

elementui el-pagination分页组件查询的时候当前页不更新

1.需要在data函数里面定义个pageshow

2.在搜索改变页码的时候加上如下代码

3.在调用接口请求的时候 重新渲染分页

bug改完了 好开心

3.在调用接口请求的时候重新渲染分页

bug改完了好开心