table滚动显示

<template>
  <div id="ui001">
    <div class="box">
      <el-table :data="tableData" style="max-width: 300px;">
        <el-table-column prop="date" label="Time" align="center" min-width="10">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import dateMix from "@/js/date.js";
import axios from "axios";
export default {
  name: "ui001",
  created() {
    this.begin()
  },
  data() {
    return {
      tableData: []
    };
  },

  methods: {
    begin() {
      this.tableData.unshift({ date: "阿瓦达无大" });
      this.tableMove();
      this.a = setInterval(() => {
        this.tableMove();
      }, 1000);
    },

    tableMove() {
      // 48px 为表格行高
      let t = document.getElementsByClassName("el-table__body-wrapper");
      setTimeout(() => {
        this.tableData.splice(4, 1);
        t[0].style.transition = "all .5s";
        t[0].style.marginTop = "48px";
      }, 500);
      setTimeout(() => {
        this.tableData.unshift({ date: '阿达瓦大无'});
        t[0].style.transition = "all 0s ease 0s";
        t[0].style.marginTop = "0";
      }, 1000);
    }
  }
};
</script>

<style scoped>
.box {
  padding: 100px;
  display: flex;
}

.btn-box {
  margin-left: 100px;
  margin-top: 50px;
}
</style>