Vue2+ElementUI实现el-table表格的自动滚动播放

这个是我实验室横向项目中的一个需求，我们做的是一个数字化大屏，就需要该功能以实现数字化自动化。类似下面这种：官网给的示例，现在要实现自动播放功能。即：鼠标不划过时自动播放，鼠标悬停时暂停播放且还能手动滑动。

直接上代码

template：

<el-table :data="userInfo" style="width: 100%" height="250" ref="scrollTable" @mouseenter.native="autoScroll(true)" @mouseleave.native="autoScroll(false)">
    <el-table-column type="index" label="序号" width="80" align="center">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="200" align="center">
    </el-table-column>
    </el-table-column>
    <el-table-column prop="className" label="班级" align="center" :formatter="formatClassName">
    </el-table-column>
</el-table>

script：

data() {
  return {
    // 党员信息（调用接口为userInfo赋值，这里不再展示）
    userInfo: [],
    // 自动滚动的定时任务
    scrolltimer: "",
  }
},

// 设置table自动滚动
autoScroll(stop) {
   var table = this.$refs.scrollTable
   var div = table.$refs.bodyWrapper
   // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
   if (stop) {
     //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
     window.clearInterval(this.scrolltimer)
   } else {
     this.scrolltimer = window.setInterval(() => {
       // 元素自增距离顶部1像素
       div.scrollTop += 1
       // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
       if (div.clientHeight + div.scrollTop >= div.scrollHeight) {
         // 重置table距离顶部距离
         div.scrollTop = 0
       }
     }, 50) // 滚动速度
   }
},

mounted() {
  this.autoScroll()
},
beforeDestroy() {
  this.autoScroll(true)
},