table表格数据无缝循环向上滚动，hover后暂停滚动

先来效果图：

 直接复制代码到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循环一次，不断减去speed
        if (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>