Vue element table refreshes the page to record the current scroll bar position and jump to the scroll bar position

front end worker 2022-08-06 07:36:04 阅读数:796

vueelementtablerefreshespage

需求:When the table has many pieces of data,The page has scroll bars,The requirement is to cause the page to refresh when the component needs to be refreshed,Or after the jump page is edited and returned,Need to jump to the current table scroll bar position.

实现方法如下:

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.Add listener scroll method

data() {

return {

scrollTop: null //Current table height
}
},
beforeDestroy () {
 //The page destroy removes the listener event
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
},
// Set the current scroll position after page refresh
savescroll () {

this.$nextTick(()=> {

setTimeout(() => {

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

注意: 调用savescroll Remember to add a judgment before the method,Is there a scroll height,防止报错

if (this.scrollTop) {

this.savescroll ()
}
版权声明:本文为[front end worker]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/218/202208060723563441.html