场景:
在切换不同页面时（被 keep-alive 缓存的组件间切换），页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后，滚动条保持在原来的位置。文章来源：https://www.toymoban.com/news/detail-515164.html
代码：文章来源地址https://www.toymoban.com/news/detail-515164.html
<template>
<div>
<!-- 表格 -->
<el-table ref="table">
...
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 表格滚动条位置
scrollTop: 0
}
},
mounted () {
// 监听滚动条的位置
this.$refs.table.bodyWrapper.addEventListener(
'scroll',
(res) => {
this.scrollTop = res.target.scrollTop
},
false
)
},
// 被 keep-alive 缓存的组件激活时调用
activated () {
this.$nextTick(() => {
setTimeout(() => {
// 设置滚动条的位置
this.$refs.table.bodyWrapper.scrollTop = this.scrollTop
}, 100) // 需要设置延迟，否则无效
})
}
}
</script>
到了这里，关于element-ui table 设置表格滚动条位置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
