需求:当表格有很多条数据,页面有滚动条,需求是当需要刷新组件时导致页面刷新,或者是跳转页面编辑完回来后,需要跳转到当前表格滚动条的位置。
实现方法如下:
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 ()
}