关于vue+element-ui项目Pagination的分页,返回默认显示第一页的问题

本文解决了一个常见的前端问题:从详情页返回后,页面跳回首页而非原页的问题。通过使用sessionStorage来保存当前页码,确保了用户在浏览详情页后能回到之前的位置。

先看问题效果:

当我页面展示在第三页的时候,我点击某一列的信息详情,返回回来直接到第一页?这显然不是我想要的效果。

我们期望的效果是:详情页返回回来后 还是在第三页。 

出现这种问题该怎么解决呢?(直接贴代码)

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="messageList.page"
        :page-sizes="[8]"
        :page-size="8"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>

我们可以将我们当前所在的页码数保存到本地,当我们跳转到其他页面,返回回来时 直接将之前的保存页码数赋值  进行列表渲染就可以了

    handleCurrentChange(newPage) {
      console.log(newPage);
      sessionStorage.setItem("messagePage", newPage); // 将当前页码数保存到sessionStorage中
      this.messageList.page = newPage;
      this.getMessageList();
    },
  created() {
    this.allMessPag = sessionStorage.getItem("messagePage");
    if (this.allMessPag != undefined) {
      this.messageList.page = Number(this.allMessPag);
      console.log(this.messageList.page);
    }

    this.getMessageList();
  }

我们再来看下效果:

大功告成!!!*(麻烦各位看官,如果对你有帮助  麻烦素质 一键三联),你的支持是我坚持的最大动力,哈哈哈,如果你有更好的方法,欢迎你私信 不吝赐教(敬礼)。

 

 

 

 

使用VueElement-UI实现分页功能,一般可按以下步骤操作: ### 1. 引入Element-UIVue 确保项目中已经安装了VueElement-UI。如果是使用Vue CLI创建的项目,可以使用npm或yarn来安装Element-UI: ```bash npm install element-ui -S ``` 然后在项目的入口文件(通常是`main.js`)中引入Element-UI: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` ### 2. 在Vue组件中使用分页器 在Vue组件的模板部分添加Element-UI分页器组件,并绑定相关数据和事件。以下是一个示例: ```vue <template> <div> <!-- 表格或其他数据展示区域 --> <el-table :data="currentData"> <!-- 表格列定义 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <!-- 分页--> <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="total" > </el-pagination> </div> </template> <script> export default { data() { return { // 模拟的全部数据 allData: [ { name: '张三', age: 20 }, { name: '李四', age: 21 }, // 更多数据... ], // 当前页显示的数据 currentData: [], // 每页显示的行数 pageSize: 10, // 当前页码 currentPage: 1, // 数据总条数 total: 0 }; }, created() { // 初始化数据 this.total = this.allData.length; this.handleCurrentChange(this.currentPage); }, methods: { // 处理页码改变事件 handleCurrentChange(page) { this.currentPage = page; // 计算当前页的数据 const start = (page - 1) * this.pageSize; const end = start + this.pageSize; this.currentData = this.allData.slice(start, end); } } }; </script> ``` ### 3. 与后端交互获取数据 在实际项目中,数据通常是从后端获取的。可以使用`axios`等工具向后端发送请求,并根据后端返回的数据更新`allData`和`total`。以下是一个简单的示例: ```vue <template> <div> <el-table :data="currentData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="total" > </el-pagination> </div> </template> <script> import axios from 'axios'; export default { data() { return { allData: [], currentData: [], pageSize: 10, currentPage: 1, total: 0 }; }, created() { this.fetchData(this.currentPage); }, methods: { // 向后端请求数据 fetchData(page) { axios.get(`/api/data?page=${page}&pageSize=${this.pageSize}`) .then(response => { this.allData = response.data.data; this.total = response.data.total; this.currentData = this.allData; }) .catch(error => { console.error('获取数据失败:', error); }); }, // 处理页码改变事件 handleCurrentChange(page) { this.currentPage = page; this.fetchData(page); } } }; </script> ``` ### 总结 通过以上步骤,就可以使用VueElement-UI实现分页功能。关键在于正确绑定分页器的`page-size`、`total`等属性,并处理好`current-change`事件,根据当前页码获取和显示相应的数据。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值