vue3中如何让element puls的table表格数据循环滚动 鼠标移入暂停

### Vue3 Element Plus Table 数据循环滚动并鼠标移入暂停 为了实现在 Vue3 中使用 Element Plus 的 `el-table` 组件来创建具有自动滚动功能的数据表，并且当鼠标悬停时能够停止滚动的效果，可以按照如下方式构建： #### 创建定时器控制表格滚动 通过 JavaScript 定时器定期更新表格的滚动位置。每当新数据被添加到表格中时，确保调用此逻辑使表格保持在最新状态。 ```javascript import { onMounted, ref } from 'vue'; export default { setup() { const tableListRef = ref(null); function startAutoScroll(intervalTime) { let intervalId; function autoScrollToBottom() { if (tableListRef.value && tableListRef.value.$refs.bodyWrapper) { const scrollContainer = tableListRef.value.$refs.bodyWrapper; scrollContainer.scrollTop = scrollContainer.scrollHeight; } } return () => { clearInterval(intervalId); // 清除之前的计时器 intervalId = setInterval(autoScrollTo Bottom, intervalTime); }; } return { tableListRef, startAutoScroll }; }, }; ``` #### 添加事件监听处理鼠标的进入和离开 利用 `mouseenter` 和 `mouseleave` 事件来管理滚动行为，在用户指针位于表格内部时不执行自动滚动操作；一旦指针移出，则恢复默认的行为模式。 ```html <template> <div @mouseenter="pauseScroll()" @mouseleave="resumeScroll()"> <!-- 表格组件 --> <el-table :data="tableData" height="250px" ref="tableListRef"> ... </el-table> </div> </template> <script lang="ts"> // ... 上述导入语句和其他函数定义 ... setup() { // ... 其他变量声明... let isPaused = false; function pauseScroll() { isPaused = true; } function resumeScroll() { isPaused = false; if (!isPaused) { startAutoScroll(1000)(); } } onMounted(() => { startAutoScroll(1000)(); }); return { //... 返回其他属性... pauseScroll, resumeScroll }; } </script> ``` 上述代码实现了基本的需求：初始化页面加载完成后启动每秒一次向下的自动滚动动作[^1]；而当用户的光标停留在表格区域内时则中断这一过程直至其再次移动至外部区域为止[^2]。