element UI 数据修改后要停留在当前页

最新推荐文章于 2023-06-01 10:15:16 发布

赫小仓鼠

最新推荐文章于 2023-06-01 10:15:16 发布

阅读量705

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_47572542/article/details/113844396

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中使用elementUI的分页组件，确保用户在修改每页显示数量或切换页面后，状态能够被持久化。通过监听`size-change`和`current-change`事件，将当前页码和每页大小存储到sessionStorage，然后在创建阶段根据存储的值恢复页面状态。此外，还提供了直接向后端传递当前页的初始化方法。

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

element UI 修改后停留在当前页

<div class="pagination-panel">
					<el-pagination :page-sizes="[10, 20, 30, 100]" 
						:page-size="pageSize" 
						:current-page="pageIndex" 
						layout="total, sizes, prev, pager, next, jumper" 
						:total="acticletotalItem" 
						@size-change="handleSizeChange" 
						@current-change="handleCurrentChange">
					</el-pagination>
				</div>

handleSizeChange(val) {
				this.pageSize = val;
				sessionStorage.setItem("messageSize",val);
				this.getActicleList();
			},
			handleCurrentChange(val) {
				this.pageIndex = val;
				console.log(this.pageIndex);
				//将当前页码数保存到sessionStorage中
				sessionStorage.setItem("messagePage", val);
				this.getActicleList();
			},

method中的created()

created() {				
			//取出当前页值
			this.allMessPag = sessionStorage.getItem("messagePage");
				if (this.allMessPag != undefined) {
				this.pageIndex = Number(this.allMessPag);
				console.log(this.pageIndex);
		         }
			//取出每页显示记录数
			this.allMessSize = sessionStorage.getItem("messageSize");
				if (this.allMessSize != undefined) {
				this.pageSize = Number(this.allMessSize);
				console.log(this.pageSize);
			     }		 
			this.getActicleList();
			this.getproductclassifyList();
			//移除当前页
			//sessionStorage.removeItem("messagePage");			
		}

方法二：直接修改

直接向后端传递当前页

// 初始化
    init() {
      this.page_index = this.page_index;
			this.getData()；
    }