table表格，快捷键下一条数据高亮之后，滚动条自动滚动到高亮的那一条

Fhm123456_

于 2022-03-24 18:36:18 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

文章标签： html vue 前端

本文链接：https://blog.csdn.net/Fhm123456_/article/details/123718318

本文介绍如何通过JavaScript计算表格数据高亮行与视口的距离差，使用scrollTop控制滚动条，实现表格内容的自动滚动到指定位置的技巧。适合前端开发者快速定位用户界面效果。

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

思路：拿到高亮的表格数据，计算距离视口的高度，也拿到表格距离视口的高度，两者相减，利用scrollTop的滚动来控制滚动条

代码如下：

    tableScrollMoves(refName, index) {
      if (!refName || !this.$refs[refName]) return// 不存在表格的ref vm 则返回
      const vmEl = this.$refs[refName].$el
      if (!vmEl) return
      // 计算滚动条的位置
      const targetTop = vmEl.querySelectorAll('.el-table__body tr')[index].getBoundingClientRect().top
      const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
      this.$nextTick(() => {
        const div = document.getElementById('left')
        div.scrollTop = targetTop - containerTop
      })
    },

这里面的document.getElementById('left')是指你写滚动的地方，比如： <div id="left" class="left" @scroll="scrollLeft"></div>

最后在点击上一条/下一条时候进行调用，调用传值this.tableScrollMoves('第一个参数就是你table表格设置的ref'，'第二个参数是高亮的那一条数据')

同上操作一定可以实现，亲测