实现表格数据循环滚动

 <el-table :data="tableData" :height="250" ref="scrollTable" @mouseenter="pauseScroll" @mouseleave="resumeScroll">
        .......数据.......
</el-table>



mounted() {
    this.$nextTick(() => {
      this.startScroll();//开始滚动
    });
 
  },
beforeDestroy() {
    if (this.scrollInterval) {//清除定时器
      clearInterval(this.scrollInterval);
    }
 },


startScroll() {
      const tableBody = this.$refs.scrollTable.$el.querySelector('.el-table__body-            wrapper');
      if (tableBody) {
        this.scrollTimer = setInterval(() => {
          const scrollTop = tableBody.scrollTop;
          const scrollHeight = tableBody.scrollHeight;
          const clientHeight = tableBody.clientHeight;

          if (this.isPaused) return; // 如果滚动暂停，则不执行滚动操作

          if (Number(scrollTop) + Number(clientHeight) >= scrollHeight) {
            // 当滚动到底部时，将第一个元素移动到最后
            const firstItem = this.tableData.shift();
            if(this.tableData.length >= this.total) {
              firstItem.idx = this.tableData.length + 1 - this.total
            }     
            this.tableData.push(firstItem);
            // 计算新行的高度，这里简单假设每行高度相同
            const rowHeight = tableBody.scrollHeight / this.tableData.length;

            // 调整滚动位置，保证视觉上的连续滚动
            tableBody.scrollTop = scrollTop - rowHeight;
          } else {
            tableBody.scrollTop += this.scrollSpeed;
          }
        }, 40);
      }
    },
    // 鼠标移入
    pauseScroll() {
      this.isPaused = true;
    },
    // 鼠标移出
    resumeScroll() {
      this.isPaused = false;
    },