在列表跳到详情页的时候,如果返回列表页回刷新页面导致滚动条在顶部,非常影响使用体验
解决办法:使用返回不刷新keepAlive。(注意:多级路由/菜单会导致keepAlive失效), 通过记录跳转前的滚动条的位置,再次进来的时候,将滚动条位置等于原来的值
1.在列表的路由上加上keepAlive:true
2.在el-table上加上ref
3.在data里面新增字段 scrollTop: 0 用于记录位置
4.
在mounted上绑定监听事件,在actived上赋值(必须用setTimeout否则不生效)
5.
mounted () {
// 监听滚动条的位置
this.$refs.table.bodyWrapper.addEventListener(
'scroll',
(res) => {
let height = res.target
this.scrollTop = height.scrollTop
},
false
)
},
activated () {
this.$nextTick(() => {
setTimeout(() => {
var scrollTop = this.$el.querySelector('.el-table__body-wrapper')
scrollTop.scrollTop = this.scrollTop
}, 13)
})
},