效果是表格数据自动滚动,鼠标移入暂停滚动 移出滚动继续
首先 设置ref="tableRef" 获取当前的dom元素
<div class="topTable">
<el-table ref="tableRef" :data="tableData" border style="width: 100%;height: 100%;">
<el-table-column prop="name" label="名字" width="120" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="No" label="内容" />
</el-table>
</div>
然后设置计时器,并且设置鼠标移入移出事件 并且设置定时器进行数据滚动
//设置时间
let timer = null;
let tableRef = ref(null);
const scroll = () => {
// 在执行新的计时器前将之前的计时器清除
if (timer) clearInterval(timer);
let status = true;
// 获取表格滚动区域的dom
const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
// 增加监听事件鼠标移入停止滚动
scrollDom.addEventListener('mouseover', () => {
status = false;
});
// 鼠标移出恢复滚动
scrollDom.addEventListener('mouseout', () => {
status = true;
});
// 设置每秒滚动一行
timer = setInterval(() => {
if (status) {
// 设置每次滚动的像素
scrollDom.scrollTop += 1;
// 当滚动到底部时修改scrollTop回到顶部
if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1 ) {
scrollDom.scrollTop = 0;
}
}
//控制速度
}, 20);
}
// tableData数据 也可根据自己的接口调用
const tableData = ref([
{ name: 'John', age: 25, No: '112' },
{ name: 'Jane', age: 30, No: '24' },
{ name: 'Bob', age: 35, No: '454' },
{ name: 'Alice', age: 28, No: '435' },
{ name: 'John', age: 25, No: '435' },
{ name: 'Jane', age: 30, No: '4354' },
{ name: 'Bob', age: 35, No: '4534' },
{ name: 'Alice', age: 28, No: '45' },
{ name: 'John', age: 25, No: '45' },
{ name: 'Jane', age: 30, No: '435' },
{ name: 'Bob', age: 35, No: '455' },
{ name: 'Alice', age: 28, No: '45' },
{ name: 'Tom', age: 32, No: '544' }
]);
//设置定时器进行自滚动
const getData = () => {
setTimeout(() => {scroll()}, 5)
}
页面上挂载以及卸载
onMounted(() => {
getData()
})
onUnmounted(() => {
// 组件卸载记得清除计时器
if (timer) clearInterval(timer);
timer = null;
})
最后完整代码展示
<template>
<div class="topTable">
<el-table ref="tableRef" :data="tableData" border style="width: 100%;height: 100%;">
<el-table-column prop="name" label="名字" width="120" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="No" label="编号" />
</el-table>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
let timer = null;
let tableRef = ref(null);
const scroll = () => {
// 在执行新的计时器前将之前的计时器清除
if (timer) clearInterval(timer);
let status = true;
// 获取表格滚动区域的dom
const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];
// 增加监听事件鼠标移入停止滚动
scrollDom.addEventListener('mouseover', () => {
status = false;
});
// 鼠标移出恢复滚动
scrollDom.addEventListener('mouseout', () => {
status = true;
});
// 设置每秒滚动一行
timer = setInterval(() => {
if (status) {
// 设置每次滚动的像素
scrollDom.scrollTop += 1;
// 当滚动到底部时修改scrollTop回到顶部
if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1 ) {
scrollDom.scrollTop = 0;
}
}
//控制速度
}, 20);
}
// const tableData = ref([])
const tableData = ref([
{ name: 'John', age: 25, No: '112' },
{ name: 'Jane', age: 30, No: '24' },
{ name: 'Bob', age: 35, No: '454' },
{ name: 'Alice', age: 28, No: '435' },
{ name: 'John', age: 25, No: '435' },
{ name: 'Jane', age: 30, No: '4354' },
{ name: 'Bob', age: 35, No: '4534' },
{ name: 'Alice', age: 28, No: '45' },
{ name: 'John', age: 25, No: '45' },
{ name: 'Jane', age: 30, No: '435' },
{ name: 'Bob', age: 35, No: '455' },
{ name: 'Alice', age: 28, No: '45' },
{ name: 'Tom', age: 32, No: '544' }
]);
//设置定时器进行自滚动
const getData = () => {
setTimeout(() => {scroll()}, 5)
}
onMounted(() => {
getData()
})
onUnmounted(() => {
// 组件卸载记得清除计时器
if (timer) clearInterval(timer);
timer = null;
})
</script>
<style scoped>
.topTable {
margin: 300px;
width: 500px;
height: 310px;
}
</style>