el - table滚动到指定位置的解决方法

909 阅读1分钟

在el-table中,想要滚动到指定位置可以采用以下方法:

首先,如果表格的行高是固定的,我们可以先获取单行的高度。

例如,通过 document.querySelector(.table - row).getOffsetHeight()获取到单行高度存为rowHeight

然后确定需要滚动到屏幕内的数据行数,假设为第5行,记为rowIndex

接着计算偏移量: const scrollHeight = rowIndex * rowHeight

最后,通过父元素滚动到这个计算出的偏移位置,像这样: parent.scrollTo({ top: scrollHeight, behavior: "smooth" })

另外还有一种方法,就是直接获取到需要滚动到窗口内的行的dom,然后直接调用dom.scrollIntoView(false),这样也能实现el - table滚动到指定位置的效果。

完整代码:

const rowHeight = document.querySelector(`.table-row`).getOffsetHeight()  
const rowIndex = 5  
const scrollHeight = rowIndex * rowHeight  
parent.scrollTo({ top: scrollHeight, behavior: "smooth" })