手写vue elementUI表格轮播效果

• html

  <el-table :data="tableData" style="width: 100%" ref="scroll_table" height="200" class="scroll_table">
         <el-table-column prop="date" label="日期" width="180">
         </el-table-column>
         <el-table-column prop="name" label="姓名" width="180">
         </el-table-column>
         <el-table-column prop="address" label="地址">
         </el-table-column>
  </el-table>

• js 

   data() {
      return {
                  scrollTimer: null,
                  tableData: [{
                      date: '2016-05-02',
                      name: '王小虎1',
                      address: '上海市普陀区金沙江路 1518 弄'
                  }, {
                      date: '2016-05-04',
                      name: '王小虎2',
                      address: '上海市普陀区金沙江路 1517 弄'
                  }, {
                      date: '2016-05-01',
                      name: '王小虎3',
                      address: '上海市普陀区金沙江路 1519 弄'
                  }, {
                      date: '2016-05-03',
                      name: '王小虎4',
                      address: '上海市普陀区金沙江路 1516 弄'
                  }, {
                      date: '2016-05-03',
                      name: '王小虎5',
                      address: '上海市普陀区金沙江路 1516 弄'
                  }, {
                      date: '2016-05-03',
                      name: '王小虎6',
                      address: '上海市普陀区金沙江路 1516 弄'
                  }, {
                      date: '2016-05-03',
                      name: '王小虎7',
                      address: '上海市普陀区金沙江路 1516 弄'
                  }, {
                      date: '2016-05-03',
                      name: '王小虎8',
                      address: '上海市普陀区金沙江路 1516 弄'
                  }]
              }
           },
       mounted () {
                  this.tableScroll();
                  let that = this;
                  // 监听鼠标移动到盒子上清除定时器
                  document.querySelector(".scroll_table").addEventListener("mouseenter", function () {
                      clearInterval(that.scrollTimer);
                      // 这里使用false(冒泡)
                  }, false);
                  //  鼠标离开时再次执行函数
                  document.querySelector(".scroll_table").addEventListener("mouseleave", function () {
                      that.tableScroll();
                  }, false);
              },
        methods: {
                  tableScroll() {
                      const table = this.$refs.scroll_table;
                          //获取滚动的盒子 这里拿到的是 .el-table__body-wrapper
                      const scroll_box = table.bodyWrapper; 
                      this.scrollTimer = setInterval(() => {
                          // 每次滚动一像素
                          scroll_box.scrollTop += 1;
                          if (
                              // 判断是否滚到底部
                              scroll_box.clientHeight + scroll_box.scrollTop + 1 >
                              scroll_box.scrollHeight
                          ) {
                              // 滚到底部后回到顶部
                              scroll_box.scrollTop = 0;
                          }
                          // 时间尽量设短一些,效果比较流畅
                      }, 30);
                  },
              },