element-ui table 设置表格滚动条位置

场景:

在切换不同页面时（被 keep-alive 缓存的组件间切换），页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后，滚动条保持在原来的位置。

代码：

<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>