先来效果图：
直接复制代码到vue就好了
<template><div class="listDiv"><div class="tableDiv" @mouseenter="stopScroll" @mouseleave="autoScroll"><div class="tHeaderContainer"><table class="tHeader"><thead><tr ref="tr"><th>负责人</th><th>任务</th><th>备注</th></tr></thead></table></div><div class="scrollContainer"><!-- 用ref绑定后就不需要再获取dom节点了，直接绑定table和tBody，然后$refs里面调用就行。在javascript里面调用：this.$refs.table 这样就可以减少获取dom节点的消耗了 --><table class="tTableName" ref="table"><tbody ref="tBody"><tr v-for="(item, index) in tableData" :key="index"><td>{{ item.functionary }}</td><td>{{ item.task }}</td><td><i class="el-icon-more"></i></td></tr></tbody></table></div></div></div></template><script>let scrollTimer;export default {name: "",components: {},data() {return {tableData: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13",].reduce((pre, cur, currentIndex) => {let data = {};data.functionary = cur + "号工人";switch (cur) {case "1":case "5":data.task = "完成AAA";break;case "2":case "6":data.task = "完成BBB";break;case "3":case "8":data.task = "完成CCC";break;case "4":case "10":data.task = "完成DDD";break;case "7":data.task = "完成EEE";break;default:data.task = "完成FFF";break;}pre.push(data);// console.log(data,pre,8888);return pre;}, []),};},mounted() {this.autoScroll();},methods: {autoScroll() {const table = this.$refs.table;const tBody = this.$refs.tBody;//保留这个子节点在原先位置的显示,先用Node.cloneNode方法复制出一个节点的副本,然后再插入到新位置//用法：var dupNode = node.cloneNode(deep);node表示将要被克隆的节点，dupNode克隆生成的副本节点//deep 可选是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。table.appendChild(tBody.cloneNode(true));//元素的height为在tr中设置的height: 1.8rem，所以offsetHeight始终为 1.8rem//(offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。)let speed = table.getElementsByTagName("td")[0].offsetHeight;function scroll() {let top = table.offsetTop; //offsetTop：DOM对象的上边距离定位父级（最近有定位属性的父级）的上边的距离，也就是table与scrollContainer的距离，初始值为0//tBody的offsetHeight是固定值，top表示超出tbody的部分为负数，0.5s循环一次，不断减去speedif (top <= speed - tBody.offsetHeight) {table.style.transition = "0s";table.style.top = 0;} else {table.style.transition = "ease 0.5s";table.style.top = top - speed + "px";}}scrollTimer = setInterval(scroll, 500);},stopScroll() {clearInterval(scrollTimer);},},computed: {},};</script><style scoped>.listDiv {width: 20%;height: 96%;display: flex;justify-content: center;align-items: center;margin: 1%;position: relative;background: url("../showFiles/2.jpg") no-repeat;}.tableDiv {z-index: 100;width: 90%;height: 90%;pointer-events: auto;padding: 0 1%;box-shadow: 0 0 1rem #b8b7b780 inset;-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);}.tableDiv::before,.tableDiv::after {content: "";pointer-events: none;position: absolute;width: 1.5rem;height: 1.5rem;transition: 0.3s ease-in-out;}.tableDiv::before {top: -0.1rem;left: -0.1rem;border-top: 0.15rem solid #769ce2;border-left: 0.15rem solid #769ce2;}.tableDiv::after {right: -0.1rem;bottom: -0.1rem;border-bottom: 0.15rem solid #769ce2;border-right: 0.15rem solid #769ce2;}.tableDiv:hover::before {width: 100%;height: 100%;border-top: 0.15rem solid #769ce2;border-left: 0.15rem solid #769ce2;animation: glow_before 1s ease-out infinite alternate;}.tableDiv:hover::after {width: 100%;height: 100%;border-bottom: 0.15rem solid #769ce2;border-right: 0.15rem solid #769ce2;animation: glow_after 1s ease-out infinite alternate;}.tHeaderContainer {position: relative;height: 2.7rem;width: 100%;overflow: hidden;}.scrollContainer {position: relative;height: calc(100% - 2.7rem);width: 100%;overflow: hidden;}.tHeader,.tTableName {position: absolute;width: 100%;height: 100%;/* border-collapse属性是运用在table标签里的， collapse值会让 边框合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 */border-collapse: collapse;}tr {height: 2rem;font-size: 0.8rem;text-align: center;border-bottom: 1px dashed rgb(107, 101, 119);}th {font-size: 0.95rem;height: 2.5rem;width: 30%;text-align: center;}td {width: 30%;height: 100%;text-align: center;}@font-face {font-family: "sysFont";src: url("/static/font/时尚中黑简体.ttf");}@keyframes glow_before {0% {box-shadow: -0.1rem -0.1rem 0.2rem #408acf50;}100% {box-shadow: -0.5rem -0.5rem 1rem #769ce2;}}@keyframes glow_after {0% {box-shadow: 0.1rem 0.1rem 0.2rem #408acf50;}100% {box-shadow: 0.5rem 0.5rem 1rem #769ce2;}}</style>
