scroll到页面顶部和 element ui table scrollTop 滚动到行头

原创于 2019-01-21 18:00:37 发布 · 4.3k 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用Element UI中的Table组件实现滚动到指定行、页面顶部以及实时获取滚动条位置的方法。通过具体代码示例，读者可以学习到如何利用$nextTick和监听scroll事件来完成这些操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table ref="multipleTable"
 ......>
      <slot></slot>
</el-table>

一、table滚动到行头

this.$nextTick(() => {
          this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
})

滚动到最后一行：
this.$nextTick(() => {
    this.$refs.multipleTable.bodyWrapper.scrollTop = this.$refs.multipleTable.bodyWrapper.scrollHeight;
})

二、页面顶部

<div class="scrollbar" ref="viewBox">
          <slot></slot>
</div>
<style>
.scrollbar {
  overflow-y: auto;
}
</style>

this.$refs.viewBox.scrollTop = 0;

三、实时获取scroll value

<div class="flex-1 ev-scrollbar" ref="tableViewBox">
          <slot></slot>
        </div>

mounted(){
      let box = this.$refs['tableViewBox'];
      box.addEventListener('scroll', () => {
        console.log(" scroll " + this.$refs.tableViewBox.scrollTop)
      }, false);
    },