Vue element 表格刷新页面记录当前滚动条位置,并跳转到滚动条位置

前端打工人 2022-08-06 07:24:15 阅读数:998

vueElement表格刷新新页面

需求:当表格有很多条数据,页面有滚动条,需求是当需要刷新组件时导致页面刷新,或者是跳转页面编辑完回来后,需要跳转到当前表格滚动条的位置。

实现方法如下:

1.首先在el-table 绑定 ref

<el-table ref="table" row-key="id" :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>

2.添加监听滚动方法

data() {

return {

scrollTop: null //当前表格高度
}
},
beforeDestroy () {
 //页面销毁移除监听事件
this.destroyScroll()
},
mounted () {

this.scroll() // 监听滚动
},
methods: {

scroll () {

this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent)
},
destroyScroll () {

this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
},
// 获取滚动的高度
scrollEvent (e) {

this.scrollTop = e.target.scrollTop
},
// 页面刷新后设置当前滚动的位置
savescroll () {

this.$nextTick(()=> {

setTimeout(() => {

let scroll = this.$el.querySelector('.el-table__body-wrapper')
scroll.scrollTop = this.scrollTop
}, 10)
})
}
}

注意: 调用savescroll 方法前记得加个判断,是否有滚动高度,防止报错

if (this.scrollTop) {

this.savescroll ()
}
版权声明:本文为[前端打工人]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/weixin_43953518/article/details/126180382