vue 表格滚动

<template>
  <div class="table-wrapper">
    <div class="table-head">
      <table
        class="table-noborder"
        style="width:100%;table-layout: fixed"
        align="center"
      >
        <thead>
          <tr>
            <th width="25%">问题类型</th>
            <th width="35%">记录时间</th>
            <th width>状态</th>
          </tr>
        </thead>
      </table>
    </div>
    <div
      class="table-body"
      style="height: 100%;overflow: hidden;"
    >
      <table
        id="table-scroll"
        class="table-scroll table-noborder"
        style="top: 0px;table-layout: fixed"
        width="100%"
        cellspacing="0"
        cellpadding="0"
        align="center"
      >
        <tbody class="tbody">
<!--          <tr-->
<!--            v-for="(item,idx) in tableData"-->
<!--            :key="idx"-->
<!--          >-->
<!--            <td width="25%">{{item.type}}</td>-->
<!--            <td width="35%">{{item.created_at}}</td>-->
<!--            <td width>{{item.status_name}}</td>-->
<!--          </tr>-->
        <tr  v-for="i in 20" :key="i">
          <td>{{i}}</td>
          <td>30</td>
          <td>40</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

 viewScroll () {
      let that = this;
      let $tbList = $("#table-scroll");
      let index = 0;
      let firstTr = $(".table-scroll tr:first").clone(); //复制第一个<tr>
      // $(".table-scroll tbody").append(firstTr);
      let scrollHeight = $(".table-scroll tr:first").height(); //获得当前<tr>的高度
      let len = $(".table-scroll tr").length;
      // return;
      // console.log(scrollHeight, "scrollHeight");
      this.scrollTimer = setInterval(function () {
        index++;
        scrollList();
      }, 1500);

      $tbList.hover(
        function () {
          clearInterval(that.scrollTimer);
        },
        function () {
          that.scrollTimer = setInterval(function () {
            index++;
            scrollList();
          }, 1500);
        }
      );

      //滚动动画
      function scrollList () {
        $tbList.stop().animate({ top: -scrollHeight }, 500, function () {
          $tbList
            .css({
              top: 0
            })
            .find("tr:first")
            .css({
              borderTop: 0
            })
            .appendTo($tbList);
        });
      }
    },