实现table的无限滚动

<template> 
  <div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut"> 
    <table class="totall"> 
      <tr class="title">
        <th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>  
      </tr>
    </table>        
    <div ref="moocBox" class="wrapper2">          
      <table :class="{ marquee_top: animate }">              
        <tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">                  
          <td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>                 
        </tr>              
        <tr v-for="itemy in listData" class="rollData" ref="con2" :key="itemy">                  
          <td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>                 
        </tr>             
      </table>          
    </div>      
  </div>
</template> 
<script>
export default {
  name: "Profile", 
  data() {
    return {
      animate: false, 
      liData: ["重点品类", "销售金额", "年周比", "达成率"], 
      listData: [
        ["FM", "53.647", "-33.76", "86.15%"],
 
        ["A", "53.647", "-33.76", "86.15%"],
 
        ["B", "53.647", "-33.76", "86.15%"],
 
        ["C", "53.647", "-33.76", "86.15%"],
 
        ["D", "53.647", "-33.76", "86.15%"],
 
        ["E", "53.647", "-33.76", "86.15%"],
 
        ["F", "53.647", "-33.76", "86.15%"],
 
        ["G111", "53.647", "-33.76", "86.15%"],
      ], 
      speed: 50, 
      myScroll: null, 
      iliHeight: 26, 
      time: null, 
      delay: 20,
    };
  },
 
  methods: {
    //滚动
 
    scrollUp() {
      this.$refs.moocBox.scrollTop++;
        // console.log(this.$refs.moocBox);
      if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
        //判断条件是否达到临界
 
        this.$refs.moocBox.scrollTop = 0;
      } else {
        this.$refs.moocBox.scrollTop++;
      }
    }, // 鼠标滑过暂停滚动
 
    mouseOver() {
      clearInterval(this.myScroll);
    }, //鼠标移开重新滚动
 
    mouseOut() {
      this.myScroll = setInterval(
        () => {
          this.$refs.moocBox.scrollTop++; 
          this.scrollUp();
        }, 
        this.speed
      );
    },
  },
 
  components: {},
 
  computed: {},
 
  created() {},
 
  mounted() {
    this.myScroll = setInterval(() => {
      this.$refs.moocBox.scrollTop++; 
      this.scrollUp();
    }, this.speed);
  },
 
  activated() {},
 
  deactivated() {},
 
  beforeDestoryed() {
    clearInterval(myScroll); 
    this.myScroll = null;
  },
};
</script>
 
<style scoped>
.wrapper {
  overflow: hidden; 
  height: 220px;
}
 
.wrapper2 {
  height: 180px; 
  overflow: hidden;
}
 
table {
  border-collapse: collapse;
  border-spacing: 0; 
  table-layout: fixed;

  background-color: rgb(2,  25,  80); 
  width: 100%; 
  color: rgb(141, 35, 35);
}
 
tabletr {
transition: all 2s ease .3s;
}
 
.marquee_top  {
      transition: all 0.5s ease-in-out; 
      margin-top: -26px;
}
 
.title  {
    height: 40px; 
    line-height: 40px; 
    text-align: center;
}
 
th {
     padding: 5px 10px; 
     width: 25%;
}
 
td {
     padding: 4px 10px; 
     width: 25%;
}
 
table th {
    text-align: center;
}
 
table tr td  {
    width: 25%; 
    text-align: center;
} 
.rollData  {
    font-size: 16px;
}
</style>