VUE3 el-table setScrollTop方法不生效

Question

VUE3 el-table setScrollTop方法不生效

表格设置时这样的

<el-table class="Content_Table" ref="fileContentTable" :data="fileContent" highlight-current-row
          >

表格是有滚动条的，运行也没有报错，但是不生效。

 self.$refs["fileContentTable"].scrollBarRef.setScrollTop(0);

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue3 中，对于 Element UI 的升级版 Element Plus 的 el-table 组件，如果你想通过编程方式设置滚动条的位置，你需要获取到正确的滚动容器并调用其滚动方法。但在原生 Element UI (Vue2) 或 Element Plus 中，并没有直接暴露 scrollBarRef 这个属性或方法。

Element Plus 中的 el-table 组件并未提供直接操作滚动条的 setScrollTop 方法，但你可以通过以下方式实现：

<template>
  <el-table ref="fileContentTable" :data="fileContent" highlight-current-row>
    <!-- 表格内容 -->
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { nextTick } from 'vue';

const fileContent = []; // 假设这是表格数据
const tableRef = ref(null);

onMounted(() => {
  nextTick(() => {
    const scrollableEl = tableRef.value.$el.querySelector('.el-table__body-wrapper');
    if (scrollableEl) {
      scrollableEl.scrollTop = 0; // 将滚动条置顶
    }
  });
});

</script>

上述代码会在组件挂载完成后，找到 el-table 内部实际滚动的 .el-table__body-wrapper 元素，并将其滚动位置设置为顶部（即 scrollTop 设置为 0）。

如果你确实是在使用 Element UI for Vue3，请检查一下文档或更新至最新版本，确认是否提供了类似的方法。若无此方法，则可参照上述示例来操作滚动条位置。