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

最新推荐文章于 2025-06-03 11:55:52 发布

wangooo

最新推荐文章于 2025-06-03 11:55:52 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/wangooo/article/details/118105916

JavaScript 同时被 2 个专栏收录

20 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

该博客介绍了一个方法，用于在Vue中实现当el-table的当前行不在可视区域时，自动滚动到显示区域的上方。通过计算滚动条位置并判断是否需要滚动，确保只有当当前行不在显示区域内时才进行滚动操作。示例代码展示了如何监听行变化并更新滚动位置。此外，还强调了el-table需要设置固定高度和显示表头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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属性

设置 el-table 的height
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