0


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>
标签: vue elementui

本文转载自: https://blog.csdn.net/weixin_55510188/article/details/129273739
版权归原作者 小志哥斯拉 所有, 如有侵权,请联系我们删除。

“element-ui table 设置表格滚动条位置”的评论:

还没有评论