This commit is contained in:
lcw
2025-10-23 12:57:58 +08:00

View File

@ -24,45 +24,55 @@
import { onMounted, ref, Ref } from "vue";
const tableRef = ref(null); //表格实例
// const tableData = ref<any[]>([]) //定义表格list
//表格测试数据
const getTableData = () => {
let data = [];
for (var i = 0; i <= 50; i++) {
data.push({
date: i,
name: `Tom${i}`,
address: `地区${i}`
});
}
return data;
};
let scrollInterval = null;
let isScroll = true;
let scrollSpeed = 2;
let scrollDelay = 20; // 控制滚动速度
onMounted(() => {
// tableData.value = getTableData() //表格数据赋值
scroll(tableRef.value.$refs.bodyWrapper); //设置滚动
setTimeout(() => {
setupScroll();
}, 100);
});
const scroll = (tableBody) => {
let isScroll = true; //滚动
const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
const setupScroll = () => {
if (!tableRef.value) return;
//鼠标放上去,停止滚动;移开,继续滚动
tableDom.addEventListener("mouseover", () => {
const tableBodyWrapper = tableRef.value.$refs.bodyWrapper;
const scrollContainer = tableBodyWrapper.querySelector(".el-scrollbar__wrap");
if (!scrollContainer) return;
// 鼠标悬停控制
scrollContainer.addEventListener("mouseover", () => {
isScroll = false;
});
tableDom.addEventListener("mouseout", () => {
scrollContainer.addEventListener("mouseout", () => {
isScroll = true;
});
setInterval(() => {
if (isScroll) {
tableDom.scrollTop += 10; //设置滚动速度
if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
tableDom.scrollTop = 0;
// 清除之前的定时器(如果有的话)
if (scrollInterval) {
clearInterval(scrollInterval);
}
// 设置新的滚动定时器
scrollInterval = setInterval(() => {
if (isScroll && scrollContainer) {
// 正常滚动
scrollContainer.scrollTop += scrollSpeed;
// 检查是否已经滚动到底部附近
if (
scrollContainer.scrollTop + scrollContainer.clientHeight >=
scrollContainer.scrollHeight - 5
) {
// 重置到顶部,实现循环滚动
scrollContainer.scrollTop = 0;
}
}
}, 100);
}, scrollDelay);
};
const tableData = ref([