vue封装无限循环滚动表格

主要是以css控制滚动和暂停效果   animation-play-state: paused;

<!-- 轮播表组件 -->
<template>
    <div class="table-container">
      <div class="table-header">
        <!-- 固定表头 -->
        <div class="table-row">
          <div class="table-cell" v-for="(header, index) in swiperTitle" :key="index">
            {{ header }}
          </div>
        </div>
      </div>
      <div class="table-body">
        <!-- 无限循环滚动内容 -->
        <div class="table-scroll" id="tableScroll">
          <div v-for="(item, index) in swiperList" :key="item.id" class="table-row">
            <div class="table-cell">{{ item.areaName }}</div>
            <div class="table-cell">{{ item.shopName }}</div>
            <div class="table-cell">{{ item.count }}次</div>
          </div>
          <div v-for="(item, index) in swiperList" :key="item.id" class="table-row">
            <div class="table-cell">{{ item.areaName }}</div>
            <div class="table-cell">{{ item.shopName }}</div>
            <div class="table-cell">{{ item.count}}次</div>
          </div>
        </div>
      </div>
      
    </div>
  </template>
  
  <script>
  export default {
    props:{
        swiperList:[],
        swiperTitle:['辖区','商户','次数'],
        tableScrollTop:0
    },
    data() {
      return {
      };
    },
    methods: {
    },
    beforeDestroy() {
    },

  };
  </script>
  
  <style scoped lang="less">
 /deep/.el-button--mini{
    padding:5px 13px;
  }
  .table-container {
    overflow: hidden;
  }
  .table-body .table-row:nth-child(odd) {
  background-color: #143e9dbf;
}
  .table-row:hover{
    background-color: #08225c !important;
  }
  .table-header {
    background: #073aad;
}
  
  .table-header, .table-body {
    overflow-x: auto;
  }
  
  .table-row {
    display: flex;
    font-size: 14px;
  }
  .table-row>div:first-child {
    width: 20%;
    
}
.table-row>div:nth-child(2) {
    width: 50%;
}
.table-row>div:nth-child(3) {
    width: 30%;
}
  .table-cell {
    padding: 8px;
    text-align: center;
  }
  
  .table-scroll {
    animation: scroll 40s linear infinite; 
  }
  .table-scroll:hover {
      animation-play-state: paused; /* 鼠标移过去就暂停滚动，松开继续滚动 */
    }
  
  @keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%);
    }
  }
  </style>