elementui 切换分页选中状态仍然停留在上次页问题

已于 2022-04-19 21:21:26 修改
阅读量2.1k 收藏 1
点赞数
分类专栏： Vue 文章标签： elementui
于 2022-04-11 19:32:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35946021/article/details/124106985
版权

前端开发 分页问题 列表切换 状态管理 页面重置
关键词由CSDN通过智能技术生成

在遇到像上面一样多个列表共用一个 pagenation 分页时，切换列表时页面任然停留在上一次的点击页面

<el-pagination small layout="prev, pager, next"
				:total="total" @current-change="handleCurrentChange"
				:page-size="pageSize" :hide-on-single-page="total==0">
		</el-pagination>

此时我们只需要让页面页数为第一页，这样在切换时页面为第一页

但是当我们上次停留在第二页再切换时，此时选中状态就为上次的那页了。这时我们就需要将总数重置为0，这样相当于刷新了一次分页组件

三线码工
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
ElementUI分页Pagination自动到第一页
璐先生的博客
09-10 1614
Pagination在切换条数或搜索后不会自动到第一页问题配置如下： <!----分页---> <div class="block"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
elementUI分页器Pagination自动到第一页
qq_43827328的博客
05-08 6201
当数据量过多时，使用分页分解数据。 <div class="pagination"> <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage" @current-change="current_change" :page-size="7" :...
个人记录：el-pagination点击其他页跳回第一页的问题
weixin_44142025的博客
04-03 671
当时的total绑定的是data里面初始化的数据0，所以当总条数为0的时候，分页组件的页码默认为1。然后我发现每次分页访问后端的时候，除了第一页是页面总数，其他页total返回的都是-1。
elementui分页组件el-pagination中切换下一面数据更新正确，但是页码还是现实第一页
qq_26311665的博客
03-05 1686
elementui分页组件el-pagination中切换下一面数据更新正确，但是页码还是现实第一页
vue 路由跳转详情页，返回时页码依然在当前页
小秋的博客
11-01 772
到这里会遇到一个问el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题，这是element的分页bug，使用v-if绑定分页。在当前的表格的vue文件table.vue中写，因为我这个table,vue是子组件，导致beforeRouteLeave无效，watch监听路由还获取不到from值，所以采用以下方法，在父组件中使用beforeRouteEnter路由钩子。首先项目中使用的是element-ui，用的el-table,el-pagination。
Vue路由跳转到新页面之后，返回旧页面保持状态不变
热门推荐
q879936814的博客
01-28 1万+
新项目中遇到了登录时点击用户协议，进入协议页面让用户阅读，然后返回登录页面时发现原来填写的手机号验证码全都没有了。 解决方案：使用keep-alive 在vue.app中添加keep-alive标签。 <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <r
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
12-12
Layui数据表格中用到了表单元素radio，在当前页面选中radio状态，并同步更新到保存表格中所有的数据的数组中（获取表格中的所有数据并保存到数组中），再点击分页组件中的下一页、上一页、跳转按钮进行切换另外一个...
详解vue修改elementUI的分页组件视图没更新问题
01-22
今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的...
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
最新发布
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
vue+elementUI组件table实现前端分页功能
10-15
而前端分页则是在客户端进行，一次性从服务器获取所有数据，然后在用户界面上进行分页操作，减少了服务器的压力，但可能增加页面的加载时间。 在Element UI中，`el-table`组件用于显示表格数据，而`el-pagination`...
vue中使用elementUI分页实现切换页面时返回页面顶部
jiangjunyuan168的博客
05-11 2600
原理： 给elementUI分页组件的切换页面时触发事件（在这里就是handleCurrentChange函数）添加一个跳转到页顶的方法即可。 实现： <!-- 分页组件 --> <el-pagination @current-change="handleCurrentChange" > </el-pagination> //跳到页顶 scrollTop(selector) { let element = selector && document
在el-dialog中进行Vue的路由跳转，跳转后出现遮罩层？
不知名人士的博客
09-26 5693
某个需求需要在路由 /systemSettle/Application 的一个页面中的对话框中进行路由跳转，至另一个页面下，如图所示（涉及公司内部业务，已部分打码）： 点击跳转之后，跳转至路由 /systemSettle/payways 下的页面。如图所示： 但是此时发现页面被一整个遮罩层遮住了，页面中的内容都无法点击，这是什么情况???? 打开控制台，如图所示： 果然有个遮罩层，这是哪里来的呢？原来我以为是项目中封装的，但是搜索了一下并没有这个东西。于是去ElmentUI的官网找一下el-dialo
分页页码数据被改变，分页UI没有被刷新还停留在之前的页码上的问题
camille009的博客
08-24 957
解决方法： <Page v-if="pageshow" :total="pageOption.total" :loading="tableLoading" :page-size="pageOption.size" show-elevator show-sizer :page-size-opts="[10, 20, 50, 100]" @on-change="changePage"
element-ui中弹框dialog在遮罩内部显示，需要点击一下页面才能正常显示
憧憬是碎了满地凉凉的宝石
10-28 1650
修改之前 修改之后 本项目使用了element-UI中的组件Dialog，需要在el-dialog标签中添加代码 :append-to-body="true" 修改前： <el-dialog title="点播提示" :visible.sync="centerDialogVisible" width="30%" center> </el-dialog> 修改后： <el-di.
el-pagination高亮问题,页面数据变了但页码高亮不变
fhrlhh的博客
12-24 546
注意文档的 current-page / v-model:current-page 这一条 , 只需要手动赋值一下即可解决高亮不变的问题。
el-pagination下标没变化问题
WmingCSDN的博客
05-29 1602
解决页码值改变页码默认下标没变化问题： <el-pagination class=“pagination” @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“query.page” :page-sizes="[10, 20, 50]" :page-size=“query.p...
vue + element 分页组件使用 以及实现刷新后页码不掉
hello world的博客
01-20 3915
1 分页组件初步介绍 分页组件最主要的参数有三个 current-page 当前页数,也就是当前的页面的页码,这是刷新后仍在当前页的关键参数 page-size 每页显示条目个数，注意别和 page-size 搞混 total 总条目数 就是所有数据的总量 注: 以上参数的值皆为 number 类型,为什么要强调这个呢?因为在刷新的时候会用到 其余的参数 ~ background boolean 是否为分页按钮添加背景色 ~ layout string 组件布局，子组件名用逗号分隔 ~ current-c
el-pagination分页，切换分页保留上一页勾选
qq_42122531的博客
07-05 506
1、<el-table-columntype="selection":reserve-selection="true"></el-table-column> 在type=“selection”里添加：reserve-selection="true" 2、el-table里添加 :row-key="getRowKey" getRowKey方法return出一个唯一id , getRowKey(row){ returnrow.orderId }, 3、在el-table里...
ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的解决方法
IT__learning的博客
03-19 1万+
问题描述：在使用vue+element开发Dialog嵌套表单的时候，表单交数据关闭之后再次打开表单没有重置，仍显示上次输入的数据。
elementui table 分页记住上一次
09-03
Element UI的table组件默认是不会记住上一次的分页状态的，需要通过自定义的方式来实现。 实现方式： 1. 在使用Element UI的table组件时，需要为table绑定一个ref属性，例如ref="myTable"。 2. 定义一个data属性，用于存储当前的分页信息。例如：currentPage、pageSize。 3. 在mounted生命周期钩子函数中，获取上次保存的分页信息并进行赋值。可以通过localStorage或者vuex等方式进行保存。 4. 在table组件的@current-change事件中，监听分页变化，将当前的分页信息保存到data中的currentPage和pageSize属性中。 5. 在使用Element UI的table组件时，通过设置:current-page.sync属性将currentPage属性与table组件的分页属性进行实时的双向绑定。 6. 在使用Element UI的table组件时，通过设置:page-size.sync属性将pageSize属性与table组件的每页条数属性进行实时的双向绑定。 7. 在beforeDestroy生命周期钩子函数中，将当前的分页信息保存到localStorage或者vuex等方式中，以便下次进入页面时能够获取到上次的分页信息。 通过以上步骤，可以实现Element UI的table组件在分页时记住上一次的分页状态。每次进入页面时都会自动恢复到上次离开时的分页状态。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三线码工

码字不易，有钱打赏，没打钱点赞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值