博客

在使用

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);
  });
},