Scenario reproduction: Keep-alive is used in the project to cache components and use the table list in the element, but in the project, the table is secondaryly encapsulated and combined with the page number. According to the direct assignment of scrollTop online, if the assignment fails, setTimeout must be added to succeed. Although the function is implemented, I don’t know the reason. If possible, I hope someone can answer it.
Less nonsense, just assign code.
<template>
<div class="table">
<el-table ref="table">
...
</el-table>
<wp-pager @page-change="pageChange" :total="total" v-if="pager" v-bind="$attrs" v-on="$listeners"></wp-pager>
</div>
</template>
<script>
import { WpPager } from '../pager'
export default {
data() {
return {
scrollTop: null
}
},
activated() {
()
},
mounted() {
// Listen to the scroll bar position this.$('scroll', (res) => {
let height =
=
},false)
},
beforeDestroy() {
this.$('scroll', (res) => {
let height =
=
},false)
},
methods: {
// When the page number changes, the scroll bar returns to the top pageChange (page) {
this.$emit('page-change', page)
= 0
()
},
// If you assign this.$('.el-table__body-wrapper').scrollTop directly, it will be invalid. You need to add setTimeout. saveScroll() {
this.$nextTick(()=> {
setTimeout(() => {
var scrollTop = this.$('.el-table__body-wrapper')
=
}, 13)
})
}
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.