vue3 + element-plus 设置表格自动滚动

　　前两天一朋友问我，说element-plus的table表单自动滚动会出现卡顿的问题，估计是没有使用requestAnimationFrame（请求动画帧）导致肉眼可见的卡顿。于是，我整理了下他的需求，给他写了一个demo，具体代码如下：

<template>
  <div>
    <!-- 设置表格高度，确保有足够的空间显示滚动条 -->
    <el-table
      :data="tableData"
      style="width: 100%; height: 300px;"
      ref="tableRef"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="Age" prop="age"></el-table-column>
    </el-table>

    <el-button @click="startScrolling">Start Scrolling</el-button>
    <el-button @click="stopScrolling">Stop Scrolling</el-button>
    <el-button @click="scrollToTop">Scroll to Top</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 设置一组假数据
    const tableData = ref([
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Jane', age: 22 },
      { id: 3, name: 'Tom', age: 30 },
      { id: 4, name: 'Lucy', age: 27 },
      { id: 5, name: 'Mike', age: 35 },
      { id: 6, name: 'Sara', age: 28 },
      { id: 7, name: 'David', age: 33 },
      { id: 8, name: 'Emma', age: 26 },
      { id: 9, name: 'Liam', age: 29 },
      { id: 10, name: 'Olivia', age: 24 },
      { id: 11, name: 'Sophia', age: 26 },
      { id: 12, name: 'Jackson', age: 31 },
      { id: 13, name: 'Ava', age: 23 },
      { id: 14, name: 'Isabella', age: 32 },
      { id: 15, name: 'Ethan', age: 27 }
    ]);

    const tableRef = ref(null);
    let animationFrameId = null;
    let isScrolling = false;

    // 滚动表格函数
    const scrollTable = () => {
      if (!tableRef.value) return;

      // 拿到 table
      const table = tableRef.value.layout.table.refs;
      // 获取表格的滚动容器
      const tableBodyWrapper = table.bodyWrapper.firstElementChild.firstElementChild;

      console.log('tableBodyWrapper', tableBodyWrapper);
      if (!tableBodyWrapper) return;

      const scrollHeight = tableBodyWrapper.scrollHeight;
      const scrollTop = tableBodyWrapper.scrollTop;
      const clientHeight = tableBodyWrapper.clientHeight;

      // 如果滚动到底部就停止
      if (scrollTop + clientHeight >= scrollHeight) {
        cancelAnimationFrame(animationFrameId);
        isScrolling = false;
        return;
      }

      // 向下滚动
      tableBodyWrapper.scrollTop += 1;

      // 继续执行下一帧
      animationFrameId = requestAnimationFrame(scrollTable);
    };

    // 启动滚动
    const startScrolling = () => {
      if (!isScrolling) {
        isScrolling = true;
        scrollTable();
      }
    };

    // 停止滚动
    const stopScrolling = () => {
      cancelAnimationFrame(animationFrameId);
      isScrolling = false;
    };

    const scrollToTop = () => {
      if (!tableRef.value) return;
      // 拿到 table
      const table = tableRef.value.layout.table.refs;
      // 获取表格的滚动容器
      const tableBodyWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
      if (tableBodyWrapper) {
        tableBodyWrapper.scrollTop = 0;  // 将滚动位置设置为 0，回到顶部
      }
    };

    return {
      tableData,
      tableRef,
      startScrolling,
      stopScrolling,
      scrollToTop
    };
  }
};
</script>

<style scoped>
/* 可以自定义样式 */
</style>