分享一个公用的方法用来让el-table滚动到指定行的方法

• 抖音：https://v.douyin.com/UjM6k9v/

• B站：https://www.bilibili.com/video/BV1gz4y1b7vN/

Demo预览：

https://sunzsh.github.io/vue-demos/#/table-scroll-tr

代码：

https://github.com/sunzsh/vue-el-demo/blob/master/src/utils/elTableScrollToRow.js

https://github.com/sunzsh/vue-el-demo/blob/master/src/views/table-scroll-tr.vue

export default function elTableScrollToRow($table, rowData) {
  const bodyWrapper = $table.$el.querySelector('.el-table__body-wrapper')
  const rowIndex = $table.data.indexOf(rowData)
  const tr = bodyWrapper.querySelectorAll('tr')[rowIndex]
  if (!bodyWrapper || !tr) {
    return
  }
  if (bodyWrapper.clientHeight + bodyWrapper.scrollTop < tr.offsetTop + tr.clientHeight || tr.offsetTop < bodyWrapper.scrollTop) {
    bodyWrapper.style.scrollBehavior = 'smooth'
    bodyWrapper.scrollTop = tr.offsetTop + tr.clientHeight - bodyWrapper.clientHeight
  }
}

前两天写了一个这样批量导入的效果

那其他都还好

包括这个对勾啊还有这个等待效果

今天给大家分享一个可以让这个el-table

自动滚动到某一行的方法

然后呢顺便说一下它的实现思路呃

但是首先前提是

这个方法适用于这种固定高度的el-table

导致它里边在滚动

而不是整个el-table在页面里滚动哈

首先呢用的时候是这样把这个方法

import的导进来

在这里

然后呢我们调用这个方法传两个参数

第一个是

这个el-table的这个对象

我们可以用refs绑定

然后呢第二个参数

是我们要滚动到那一行的数据对象

就可以了

他会根据这个数据对象

找到他的第几行在这里边

那实现的思路其实也并不复杂

首先我们知道

这个滚动其实是一个大的table在一个

固定高度的div里边进行滚动

这个固定高度呢之前其实我们也提过

就是这个body Wrapper

就这个层

这个层大看它是201高度

但是里边有个table是1,488的高度

这个呢我们也可以通过这个layers来

验证哈这个layers之前我提过

大家如果找不到呢

在这

点这个more tools里边有layers把它打开

然后大家看

这个层现在就是

这个body wrappper

然后呢（我稍微把它放大一点啊）

我来滚动里边table

大家看

它其实就是

里边大的table在这个body wrapper里边滚动

所以我们也可以这样来试一下哈

我们先选中这个bodyWrapper

然后呢

我们用代码来控制一下它的scrollTop

比如说我们让它等于

大家看 就滚动了

但是呢它没有动画是不是

怎么加动画呢

这个之前我们也说过

我们可以用这个style点

scrollBehavior等于smooth

然后我们再来试一下让它等于

注意大家看 它就有动画了

那剩下的就好说了

我们就来计算它的高度值就好了

这是这个方法的全部代码啊

首先呢我们找到这个bodyWrapper

然后呢

通过这个数据对象找到它在第几行

找到了这个第几行其他的就好办了

我们就知道要滚动到什么位置了

只是呢我这加了一个判断

用来判断什么时候他才需要滚动

因为他有时候已经在这个范围内了

他就不需要滚动了

那最核心的滚动的位置就是这行代码

这行代码的逻辑其实也很简单哈

首先呢

这有一个

body wrapper

然后呢body Wrapper里边

有一个高高的table

然后其中有一行

就是我要滚动的那个位置

假设我们现在已经

滚动到那个具体的位置了

因为我想让它滚动完之后啊

它处于这个包的wrapper最下边

一会

我们来说滚动到上面那个更简单哈

比如说我想让他最终滚动完

这行就处在这个位置上

那我们最终要给这个scrollTop

设置的值是什么呢

就是

这个 对吧

这个的高度

所以呢我们可以这样

因为这个就是那个tr嘛

所以它的高度就可以用tr的

这一部分的高度这个就是offset top

然后呢去加上它自身的这个高度

就是这一块的高度

这样的话呢

我们就找到了整个这一块的高度

再去减去

中间这个bodyWrapper的高度

那最终对应起来呢

这就是tr.offsetTop

这块呢中间这个蓝色呢就是

tr.clientHeight

然后

然后呢减去的这一块就是

bodyWrapper.clientHeight

那如果最终想要的效果是滚动完

这行在这个bodyWrapper的最上面

其实更简单

我们直接

让它滚动到这个tr的offsetTop就行了

我们来试一下啊

大家看因为他在这个范围内的时候

他是不滚动的

我们也可以把这个判断去掉

我们再来试一下

大概就是这样的效果了

那这个代码呢

我会给它放到GitHub这个代码库里边

或者的话呢

大家记着这个1024bugs.com （访问不到就加www）

这个地址也可以

一会我会把这个demo和

代码的入口放在这里边