在使用element-ui的分页组件el-pagination时,有时我们翻页到某一页后刷新,希望刷新之后页面仍然保留在当前页面。
思路如下:
我们可以在element-ui分页组件el-pagination翻页的时候改变url地址栏的参数,获取数据的时候参数再从url地址栏获取。
这样即使页面刷新了也能传递给后台之前的参数,获得之前页面的数据。
代码如下:

<div class="pagination">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    :current-page.sync="currentPage"
    layout="total, sizes, prev, pager, next" background
    :total="count">
  </el-pagination>
</div>
//每页大小变化
handleSizeChange(val) {
  this.$router.replace({
    path: this.$route.path,
    query: {
      page: this.$route.query.page ? this.$route.query.page : 1,
      pageSize: val,
    }
  });
  this.getData();
},
//分页页码变化
handleCurrentChange(val) {
  this.$router.replace({
    path: this.$route.path,
    query: {
      page: val,
      pageSize: this.$route.query.pageSize ? this.$route.query.pageSize : 10,
    }
  });
  this.getData();
},
//获取数据
getData(){
  axios.post({
    page: this.$route.query.page ? this.$route.query.page : 1,
    pageSize: this.$route.query.pageSize ? this.$route.query.pageSize : 10,
  }).then((res) => {
    console.log(res)
  }).catch((err) => {
    console.error('获取列表出错');
    console.error(err);
  });
},
GitHub 加速计划 / eleme / element
15
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐