0
点赞
收藏
分享

微信扫一扫

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

目标践行者 2022-03-24 阅读 50

思路:拿到高亮的表格数据,计算距离视口的高度,也拿到表格距离视口的高度,两者相减,利用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','第二个参数是高亮的那一条数据')

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

举报

相关推荐

0 条评论