vue2 el-table 列表滚动轮播，每次滚动一行

<template>
  <div class="leftBom" @mouseenter="autoScroll(false)" @mouseleave="autoScroll(true)">
    <el-table :data=" tableData" style="width: 100%;" height="98%" ref="table">
      <el-table-column prop="name" label="指标" show-overflow-tooltip align="center" min-width="" />
      <el-table-column prop="value" label="窄带 T2T" width="60px" align="center" show-overflow-tooltip />
      <el-table-column prop="value" label="窄带 T2C" width="60px" align="center" show-overflow-tooltip />
      <el-table-column prop="value" label="低轨宽演 T2T" width="86px" align="center" show-overflow-tooltip />
      <el-table-column prop="value" label="低轨宽演 T2C" width="86px" align="center" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '1呼叫成功率（%）',
          value: '95.12',
        },
        {
          name: '2呼叫成功率（%）',
          value: '95.12',
        },
        {
          name: '3呼叫成功率（%）',
          value: '95.12',
        },
        {
          name: '4呼叫成功率（%）',
          value: '95.12',
        },
        {
          name: '5呼叫成功率（%）',
          value: '95.12',
        },
        {
          name: '6呼叫成功率（%）',
          value: '95.12',
        },
      ],
      scrollTimer: null,
      slider: '',
    };
  },
  mounted() {
    setTimeout(() => {
      this.autoScroll(true);
    }, 3000);
    window.addEventListener('resize', () => {
      this.autoScroll(true);
    });
  },
  destroyed() {
    this.scrollTimer && clearInterval(this.scrollTimer);
  },
  methods: {
    autoScroll(stop) {
      this.slider = document.querySelector('.leftBom .el-table .el-table__body-wrapper .el-table__body');
      let clientHeight = document.querySelector('.leftBom .el-table .el-table__body-wrapper').clientHeight;
      if (clientHeight < this.tableData.length * 40 && stop) {
        if (this.scrollTimer) {
          return;
        }
        this.scrollTimer = setInterval(() => {
          this.slider.style.transition = 'transform 0.5s linear';
          this.slider.style.transform = `translateY(-40px)`;
          this.slider.addEventListener('transitionend', () => {
            let arr = this.tableData.shift();
            this.tableData.push(arr);
            this.slider.style.transition = 'none';
            this.slider.style.transform = `translateY(0)`;
          }, { once: true });
        }, 3000);
      } else {
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.leftBom {
  color: #ffffff;
  position: relative;
  padding: 0 10px;
  height: calc(100% - 70px);

  ::v-deep .el-table {
    font-size: 12px;
    border: 1px solid #0c2343;
    border-radius: 4px;
    th:not(:first-child) .cell {
      border-left: 1px solid rgba(104, 173, 255, 0.1);
      padding: 7px 0;
    }
    th {
      background-color: #0b2058 !important;
      border-color: rgba(104, 173, 255, 0.1) !important;
      letter-spacing: 2px;
    }
    tr,
    td {
      color: #ffffff;
      background-color: #00143d !important;
      border-bottom: 1px solid rgba(104, 173, 255, 0.1) !important;
    }
    td:not(:first-child) .cell {
      border-left: 1px solid rgba(104, 173, 255, 0.1);
      padding: 8px 0;
    }
    .el-table__cell {
      padding: 0 0;
    }
    &::before {
      display: none;
    }
    .el-table__body-wrapper {
      overflow: hidden;
      .el-table__body {
        transition: transform 0.5s linear;
      }
    }
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  // 去掉el-table表头右侧空白区域
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }

  ::v-deep .el-table__inner-wrapper::before {
    background-color: transparent !important;
  }
}
</style>