基于vue2和elementui的table实现表格内容一条一条向上滚动播放

实现elementui中的表格一秒自动滚动一行，滚动条到底部后重新回到第一行开始滚动。

<template>
    <el-table ref="wgzp" :data="tableData" height="100%" :row-style="rowStyle" @cell-mouse-enter="MouseEnter" @cell-mouse-leave="MouseLeave" class="elTable">
      <el-table-column prop="qymc" label="企业名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="wglx" label="违规类型" width="75"></el-table-column>
      <el-table-column prop="dw" label="点位" show-overflow-tooltip></el-table-column>
      <el-table-column prop="zpsj" label="抓拍时间" width="65"></el-table-column>
    </el-table>
</template>

<script>
  /**
   * @date 2022-03-11
   * @Description: 滚动表格
   */
  export default {
    name: "wgzp",
    data(){
      return{
        interval:'',
        rowStyle:{
          color:'#B6CFEF',
          fontSize:'12px',
          height:'32px'
        },
        tableData:[
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'未戴厨师帽',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
          {qymc:'覅地方呢地方呢顶顶顶',wglx:'老鼠',dw:'储藏区6',zpsj:'09:06'},
        ]
      }
    },
    methods:{
      scroll(){
        let maxHeight=this.$refs.wgzp.$el.querySelectorAll ('.el-table__body')[0].offsetHeight;
        let clientHeight=this.$refs.wgzp.bodyWrapper.clientHeight;
        if(Math.abs(this.$refs.wgzp.bodyWrapper.scrollTop-(maxHeight-clientHeight))<5){ //预留5像素误差
          this.$refs.wgzp.bodyWrapper.scrollTop=0;
        }else{
          this.$refs.wgzp.bodyWrapper.scrollTop+=32;//32是每一行表格的高度，每秒滚一行
        }
      },
      MouseEnter(){//鼠标移入停止滚动
        clearInterval(this.interval);
      },
      MouseLeave(){//鼠标离开继续滚动
        this.interval=setInterval(this.scroll,1000);
      }
    },
    mounted() {
      this.interval=setInterval(this.scroll,1000);
      //请求后台接口获取列表数据
      /*this.getList().then((res)=>{
        this.tableData = res.list;
      });*/
    },
    beforeDestroy(){
      clearInterval(this.interval);
    }
  }
</script>

<style lang="scss">
	/*美化滚动条样式*/
  ::-webkit-scrollbar {
    width: 5px;
    height: 0px;
  }
  ::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:vertical {
    height: 0px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 0px;
  }
  ::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
  }
  /*表格内容样式调整，可删除*/
.elTable {
  th.el-table__cell{
    color:#fff ;
    background-color: #414b7a;
  }
  .el-table__row:nth-of-type(odd){
    background-color: #071464 ;
  }
  .el-table__row:nth-of-type(even){
    background-color: #0A1C8E ;
  }
  tr:hover{
    color:#3E9EFF !important;
  }
}
.elTable td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-bottom: none;
}
.elTable::before{
    height: 0;
}
</style>