vue+element解决 table点击操作按钮(如编辑/详情 )在编辑/详情页面关闭/保存后返回table当前页
思路:将当前页的页码nowPage存入localStroage/session,然后点击编辑/详情跳转到编辑/详情页面,然后,再次返回当前页的时候,在created生命周期里,获取到存储的nowPage,再进行加载这里要借助vue中独有的守卫钩子函数 beforeRouteEnter(在路由跳转前加载数据)还有beforeRouteEnter beforeRouteUpdate、befo...
思路:将当前页的页码nowPage存入localStroage/session,然后点击编辑/详情跳转到编辑/详情页面,然后,再次返回当前页的时候,在created生命周期里,获取到存储的nowPage,再进行加载
这里要借助vue中独有的守卫钩子函数 beforeRouteEnter(在路由跳转前加载数据)还有 beforeRouteEnter beforeRouteUpdate、beforeRouteLeave
beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined console.log(to, '组件独享守卫beforeRouteEnter第一个参数'); console.log(from, '组件独享守卫beforeRouteEnter第二个参数'); console.log(next, '组件独享守卫beforeRouteEnter第三个参数'); next(vm => { //因为当钩子执行前,组件实例还没被创建 // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。 console.log(vm);//当前组件的实例 }); },
直接上代码:
下图中的 v-if=“totalPage!=0” 在本文最后解释
分页组件,在 handleCurrentChange方法中做如下操作
之后在cerated中做如下操作:
守卫钩子:
写到这测试一下 发下页面内容正确,页码依旧是第一页
问题造成的原因:在我门返回当前页面取得总条数totalNum之前,element-ui组件已经在页面加载完毕了,这时的totalNum绑定的是data里初始化的总条数也就是0,所以呢总条数为0的时候,分页组件默认页码为1,并且当totalNum在Created生命周期里取得数据后,组件不会刷新才会导致页面内容正确,页码依旧是第一页。
解决办法:
我们要在created之后刷新这个分页组件或者让分页组件的html在cerated之后加载到页面,再次刷新这个分页组件不太现实,我们选择在created之后加载分页组件,具体方法使用v-if。在totalNum不为data里初始值为0的时候,才让这段html加载
如有更好的方法请留言,大家一起学习~QAQ
更多推荐
所有评论(0)