<template>   <el-table     class="tableList"     ref="rw_table"     height="700"     solt="append"     :data="useData"     :row-class-name="tableRowClassName"     @cell-mouse-enter="mouseEnter"     @cell-mouse-leave="mouseLeave"   >     <el-table-column       prop="username"       label="姓名"     />     </el-table-column>     <el-table-column       label="备注"     >       <template slot-scope="scope">         <span>{{ getNote(scope.row) }}</span>       </template>     </el-table-column>   </el-table> </template>

 

<script> export default {   name: 'TableObj',   props:{     tableData:{       type: Array,       default:()=>{         return []       }     }

 

  },   data () {     return {       useData:[],       autoPlay:false,       timer:undefined     }   },   watch:{     tableData:{       deep:true,       handler(v){         if(v&&v.length){           this.startRolling = false           let data = []           for(let i in v){             data.push(v[i])           }           this.useData = data           this.autoPlay = true           this.startMove()         }       }     }   },   methods: {     // 鼠标进入     mouseEnter() {       this.autoPlay = false     },     // 鼠标离开     mouseLeave() {       this.autoPlay = true     },     startMove(){       // 拿到表格挂载后的真实DOM       const table = this.$refs.rw_table       if(table){         // 拿到表格中承载数据的div元素         const divData = table.bodyWrapper         if(divData){           if(this.timer){             clearInterval(this.timer)           }           // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)           this.timer = setInterval(() => {             if(this.autoPlay){               // 元素自增距离顶部1像素               if(divData.scrollTop>=48){                 const item = this.useData.shift();                 this.useData.push(item)                 divData.scrollTop-=48               }               divData.scrollTop += 1             }           }, 50)         }       }     },     getStatus(row){       let status = ''       if(row.workType){         switch(row.workType){           case 1:             status = `在岗`;             if(row.workplace){               status +=`(${row.workplace})`             }             break;       }

 

      return status;     },     getNote(row){       let not = ''       if(row.workType!==1&&row.handoverName){         not = `工作交接${row.handoverName}`         if(row.handoverPos){           not += ` (${row.handoverPos})`         }       }       return not     },     tableRowClassName({row}) {       let className = ''       if(row.workType){         switch(row.workType){           case 1:             className = 'onJob';             break;         }       }

 

      return className;     }   } } </script>