### 使用
Vue 3 和 `el
-table` 组件实现
自动滚动
在
Vue 3 中使用 `el
-table` 实现
自动滚动功能可以通过自定义逻辑来完成，因为官方并没有提供直接支持此特性的属性[^1]。为了达到这一目的，可以
利用 JavaScript 的
定时器函数配合 CSS 或者原生 DOM 操作来进行。
#### 方法一：基于时间间隔的
自动滚动
这种方法适用于简单的场景，比如展示公告栏或轮播图等不需要复杂交互的情况。以下是具体实现方式：
```javascript
<template>
<div ref="
tableContainer" style="overflow
-y: auto; height: 300px;">
<el
-table :data="visibleData">
<!
-- 表格列配置
-->
</el
-table>
</div>
</template>
<script setup>
import { ref, onMounted } from '
vue';
const
tableContainer = ref(null);
let intervalId;
onMounted(() => {
startAutoScroll();
});
function startAutoScroll() {
let scrollTop = 0;
const containerHeight =
tableContainer.value.clientHeight;
intervalId = setInterval(() => {
scrollTop += 1;
if (scrollTop >= containerHeight) {
scrollTop = 0;
}
tableContainer.value.scrollTop = scrollTop;
}, 20); // 调整速度可通过改变毫秒数控制
}
</script>
```
上述代码片段展示了如何创建一个具有固定高度并允许垂直
滚动的
内容容器，并设置了一个每20ms增加一次顶部偏移量(`scrollTop`)的时间循环，从而实现了平滑向下的
自动滚动效果。当
滚动条到达底部时会重置回初始位置继续向上移动。
#### 方法二：结合鼠标事件优化用户体验
对于更复杂的业务需求，如希望用户能够暂停/恢复
滚动以及进行手动拖拽，则可以在方法一的基础上加入相应的监听处理程序:
```javascript
// ... 上述模板部分保持不变 ...
<script setup>
import { ref, onMounted, watchEffect } from '
vue';
import { useMouse } from '@
vueuse/core';
const
tableContainer = ref(null);
let isPaused = false;
let intervalId;
onMounted(() => {
startAutoScroll();
// 添加鼠标进入离开事件监听
tableContainer.value.addEventListener('mouseenter', pauseScrolling);
tableContainer.value.addEventListener('mouseleave', resumeScrolling);
//
利用 vue-use 库获取当前鼠标的坐标状态
const mousePosition = useMouse({ type: 'client' });
watchEffect(() => {
if (!isPaused &&
mousePosition.x > 0 &&
mousePosition.y > 0 &&
mousePosition.x < window.innerWidth &&
mousePosition.y < window.innerHeight) {
clearInterval(intervalId);
setTimeout(resumeScrolling, 5000); // 鼠标静止一段时间后重新启动
滚动
}
});
});
function startAutoScroll() {
let scrollTop = 0;
const containerHeight =
tableContainer.value.clientHeight;
intervalId = setInterval(() => {
scrollTop += 1;
if (scrollTop >= containerHeight || isPaused) return;
tableContainer.value.scrollTop = scrollTop;
}, 20);
}
function pauseScrolling() {
isPaused = true;
clearInterval(intervalId);
}
function resumeScrolling() {
isPaused = false;
startAutoScroll();
}
</script>
```
这段增强版脚本不仅保留了原有的
自动滚动特性，还增加了对用户的友好互动体验——当光标位于表格区域内时停止
滚动；一旦检测到长时间无操作则
自动重启
滚动过程。此外，也考虑到了边界条件以防止越界错误的发生。
本文介绍了如何在Vue项目中利用定时器实现Table组件的内容自动滚动效果，详细讲解了实现步骤和关键代码。
最低0.47元/天 解锁文章
扫一扫
3304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
