<template>
<el-table ref="tabledata" :data="tabledate" height="400" @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
<el-table-column type="selection"></el-table-column>
<el-table-column label="序号" prop="id"></el-table-column>
<el-table-column label="英文名" prop="value"></el-table-column>
<el-table-column label="中文名" prop="label"></el-table-column>
</el-table>
</template>
<script>
export default({
name:'tableDemo',
data() {
return{
table_interval:null,
tabledate:[
{id:'1',value:'right',label:'正确'},
{id:'2',value:'wrong',label:'错误'},
{id:'3',value:'rightorwrong',label:'正确or错误'},
{id:'4',value:'right',label:'正确'},
{id:'5',value:'wrong',label:'错误'},
{id:'6',value:'rightorwrong',label:'正确or错误'},
{id:'7',value:'right',label:'正确'},
{id:'8',value:'wrong',label:'错误'},
{id:'9',value:'rightorwrong',label:'正确or错误'},
{id:'10',value:'right',label:'正确'},
{id:'11',value:'wrong',label:'错误'},
{id:'12',value:'rightorwrong',label:'正确or错误'},
{id:'13',value:'right',label:'正确'},
{id:'14',value:'wrong',label:'错误'},
{id:'15',value:'rightorwrong',label:'正确or错误'}
]
}
},
methods: {
//数据滚动
dataScrolling:function(){
var table=this.$refs.tabledata;
var top=table.bodyWrapper;
this.table_interval=setInterval(() => {
top.scrollTop+=1;
if(top.clientHeight+top.scrollTop==top.scrollHeight){
top.scrollTop=0;
}
}, 100);
},
//鼠标进入,停止滚动
mouseEnter:function(){
clearInterval(this.table_interval);
this.table_interval=null;
},
//鼠标离开,开始滚动
mouseLeave:function(){
this.dataScrolling();
}
},
})
</script>
|