vue element ui table 自动无限滚动组件
<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>
