el-table 自动滚动到对应的行

el-table 当当前行不在显示的区域中时，将当前行自动滚动到显示区域的上方。

300是显示区域的高度，-300是防止每次当前行发生变化时，当前行都要滚动到显示区域的上方。

这样只有当 当前行不在显示区域中时，才会滚动到显示区域的上方。

    updateSpeakSentenceRow() {
        let curIndex = 0;

        // 如果当前索引变化
        if (curIndex !== this.curSentenceRowIndex) {
            let vmEl = this.$refs.transcriptTable.$el;
            if (vmEl) {
                // 计算滚动条的位置
                const targetTop = vmEl.querySelectorAll('.el-table__body tr')[curIndex].getBoundingClientRect().top
                const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
                if (targetTop - containerTop - 300 > this.$refs.transcriptTable.bodyWrapper.scrollTop ||
                    curIndex < this.curSentenceRowIndex) {
                    this.$refs.transcriptTable.bodyWrapper.scrollTop = targetTop - containerTop;
                }
            }

            // 设置当前的文本
            this.curSentenceRowIndex = curIndex;
        }
    },

要自动滚动，还需设置el-table属性

1. 设置 el-table 的height
2. el-table的表头必须显示，不能设置表头 :show-header='false'

<el-table ref='cmtTable' :data="publicCmtList" height="360" :row-class-name="cmtTableRowClassName"></el-table>

 

参考：https://blog.csdn.net/qq_39367226/article/details/107451463