element-UI实现分页器切换页码后,点击某行就行跳转,希望返回后,页码还是保持在刚才浏览的位置
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
如上图所示的操作,使用element-UI的el-pagination插件来做分页。
核心代码如下
<el-pagination
@current-change="nextPage"
layout="prev, pager, next"
:current-page="current.page"
:total="pageInfo.dataCount">
</el-pagination>
mounted() {
console.log("it is mounted")
this.currentPage = Number(localStorage.getItem('pagination')) || 1;
this.nextPage(this.currentPage);
},
beforeUpdate () {
localStorage.setItem('pagination', this.currentPage);
console.log("it is beforeUpdate",localStorage.getItem('pagination'))
},
beforeDestroy () {
console.log("it is beforeDestroy")
localStorage.setItem('pagination', '1');
}
注意:
1,在触发二级路由的时候,原组件不会被销毁,只会被更新。返回到二级路由的时候,组件再次更新,所以使用mounted钩子函数,而不是created函数来进行page的跳转操作。
2,localStorage中getItem方法取到的page是string类型,需要转为number 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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)