###
Vue3 中 el
-table 的自动
循环滚动效果实现
要实现 `el
-table` 的自动
循环滚动效果，可以通过
定时器配合 DOM 操作来控制表格容器的滚动条位置。以下是具体的实现方法：
#### 实现思路
1
. 使用 `
setInterval`
定时改变表格容器的 scrollTop 值，模拟滚动行为。
2
. 当滚动到最后一行时，将第一行的数据克隆并追加到数据源的最后一行，从而实现无缝衔接的效果[^4]。
#### 示例代码
以下是一个完整的示例代码片段，展示如何在
Vue3 和 Element Plus 中实现这一功能：
```
vue
<template>
<div class="scroll
-container">
<el
-table :data="tableData" style="width: 100%">
<el
-table
-column prop="date" label="日期" width="180"></el
-table
-column>
<el
-table
-column prop="name" label="姓名" width="180"></el
-table
-column>
<el
-table
-column prop="address" label="地址"></el
-table
-column>
</el
-table>
</div>
</template>
<script setup>
import { ref, onMounted } from '
vue';
const originalData = [
{
date: '2024
-09
-01',
name: '张三',
address: '北京市朝阳区'
},
{
date: '2024
-09
-02',
name: '李四',
address: '上海市浦东新区'
},
{
date: '2024
-09
-03',
name: '王五',
address: '广州市天河区'
}
];
let tableData = ref([
...originalData]);
let scrollIndex = ref(0);
onMounted(() => {
const container = document
.querySelector('
.scroll
-container');
setInterval(() => {
if (container
.scrollTop >= container
.scrollHeight
- container
.clientHeight) {
// 到达底部时，追加首行数据
tableData
.value
.push({
...originalData[0] });
tableData
.value
.shift(); // 移除顶部数据保持数量不变
}
container
.scrollTop += 5; // 控制每次滚动的距离
}, 100); // 设置间隔时间
});
</script>
<style scoped>
.scroll
-container {
height: 300px;
overflow
-y: auto;
}
</style>
```
上述代码中：
- 数据源 `originalData` 是原始数据集合，用于克隆和追加。
- `
setInterval` 方法每 100ms 执行一次，逐步增加 `
.scroll
-container` 的 `scrollTop` 属性值，模拟滚动效果。
- 当滚动到底部时，通过 `push` 追加新数据，并移除旧数据以维持固定长度。
---
### 注意事项
1
. **性能优化**：如果数据量较大，建议启用虚拟列表功能以提升渲染效率[^3]。
2
. **样式调整**：需确保 `
.scroll
-container` 高度适配实际需求，避免因高度不足导致无法正常滚动。
3
. **兼容性测试**：不同浏览器可能对滚动行为有细微差异，应充分测试跨平台表现。
---
本文介绍了一个使用Vue.js实现的定时任务功能，通过setInterval每隔15秒调用getUserInfo方法来更新用户信息，并在组件销毁前清除定时器，避免内存泄漏。
扫一扫
5250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
