使用element-ui的分页组件刷新后保留在当前页
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
在使用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
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
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 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)