可直接复制使用
<template> <div> <el-table ref="tableRef" :data="tableData" height="170" class="rollTableRow" > <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="aa" /> </el-table> </div> </template> <script lang="ts" setup> import { onMounted, ref, Ref } from "vue"; const tableRef: Ref<HTMLElement | any> = ref(null); //表格实例 const tableData = ref<any[]>([]); //定义表格list //表格测试数据 const getTableData = (): any => { let data = []; for (var i = 0; i <= 50; i++) { data.push({ date: i, name: `Tom${i}`, address: `地区${i}`, }); } return data; }; onMounted(() => { tableData.value = getTableData(); //表格数据赋值 scroll(tableRef.value.$refs.bodyWrapper); //设置滚动 }); const scroll = (tableBody: any) => { let isScroll = true; //滚动 const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0]; //鼠标放上去,停止滚动;移开,继续滚动 tableDom.addEventListener("mouseover", () => { isScroll = false; }); tableDom.addEventListener("mouseout", () => { isScroll = true; }); setInterval(() => { if (isScroll) { tableDom.scrollTop += 3; //设置滚动速度 if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) { tableDom.scrollTop = 0; } } }, 100); }; </script> <style scoped> /* ::v-deep .el-table__header { height: 3rem; } */ /* 表头背景色及字体颜色 */ ::v-deep .el-table th.el-table__cell { background-color: #1132aa; color: #09ccde; } /* 背景透明 */ ::v-deep .el-table tr { /* background-color: #10274c; */ background-color: transparent; color: #fff; } /* 表格背景透明 */ .rollTableRow { background: transparent; } /* 鼠标悬浮时 表格背景色及字体颜色 */ ::v-deep .el-table tbody tr:hover > td { background-color: rgb(65, 111, 180) !important; color: #ffffff; } </style>