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

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

实现方法如下：

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 ()
}