场景

我是需要在table最后添加一行数据，然后把滚动条滚动到最后。

查网上的解决方案都是读取html结构，暴力的去获取，虽能解决问题，但是不喜欢这种打补丁的解决方案，我想着官方应该有相关的定义，于是就去看table的定义。

技术栈

我用的是vue3+ts+elment-plus。elment-plus的table提供了滚动的方法`setScrollTop`，但是api上没找到获取数据列高度的方法，于是我就F12看table的类型定义，发现了一个`$ref`属性，打印出来一看，上面竟然定义了各个层级的对象。

于是我就获取各个对象的高度看看哪个是我需要的。

一开始我就打印tableWrapper.height，发现不对，打印这个对象，发现高度是可视区域的高度。

又打印tableBody.height的高度，发现获取不到，结果发现了`scrollHeight`，看数值对了。

代码如下：

<el-table
ref="singleTableRef"
:data="list"
border
style="width: 100%"
height="500px"
>
... 列的定义
</el-table>

// 滚动设置
const onScrollBottom = () => {
   // 我上面还有其他的处理，所以我放到了nextTick中
    nextTick(() => {
        // 解决方法
        singleTableRef.value?.setScrollTop(singleTableRef.value?.$refs.tableBody.scrollHeight)
    })

}

轻松搞定！