vue elementUI中 el-table 如何在切换页码让滚动条回到顶部或底部

在Vue中使用elementUI的el-table组件时，如果需要在切换页码导致表格数据变化时让滚动条回到顶部或底部，可以通过监听表格数据的变化并使用原生JavaScript操作滚动条来实现。

以下是实现滚动条回到顶部或底部的示例代码：

<template>
  <el-table
    :data="tableData"
    ref="tableRef"
    @hook:mounted="scrollTable"
  >
    <!-- 列配置 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      scrollToTop: true, // 控制是否滚动到顶部
    };
  },
  watch: {
    // 监听分页数据变化，滚动条回到顶部或底部
    tableData(newData) {
      this.$nextTick(() => {
        const table = this.$refs.tableRef;
        if (table) {
          if (this.scrollToTop) {
            table.$el.scrollTop = 0; // 滚动到顶部
          } else {
            // 滚动到底部
            table.$el.scrollTop = table.$el.scrollHeight - table.$el.clientHeight;
          }
        }
      });
    },
  },
  methods: {
    // 模拟分页数据变化的方法
    fetchData() {
      // 这里应该是获取新的tableData的逻辑
      // this.tableData = ...
    },
    scrollTable() {
      this.scrollToTop = true; // 默认滚动到顶部
    },
  },
};
</script>

在这个示例中，我们使用了watch来监听tableData的变化。当tableData更新后，watch会执行并根据scrollToTop的值将滚动条滚动到顶部或底部。

请注意，这里的@hook:mounted="scrollTable"是为了确保在表格挂载后立即执行滚动操作。此外，this.$nextTick()确保DOM已经更新完成后执行滚动操作。

你可以根据实际需求调整scrollToTop的值来决定滚动到顶部还是底部。如果你需要在用户切换页码时手动控制滚动位置，可以在页码变化的事件处理函数中设置scrollToTop的值。