实现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 -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>
