vue element ui table 自动无限滚动组件
2024-10-20 20:51:48
<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>
最新文章
- Ubuntu虚拟机中断后重启网络断接错误解决方案
- SharePoint 2013 定制搜索显示模板
- include使用中注意的问题
- Oracle XE http端口8080的修改
- win10如何将此电脑显示在桌面
- Backbone模型
- 展讯DTS路径及编译
- Python中的闭包
- [iOS]如何删除工程里面用cocoapods导入的第三方库
- 网络请求 post 的接受请求头的代理方法
- 2012Android开发热门资料（110个）
- bootstrap 切换页签失效的解决方法
- RxVolley使用文档 —— RxVolley = Volley + RxJava + OkHttp
- 手机端rem 用法
- es基本修改相关的
- rabbitmq 二进制安装
- Catch---hdu3478（染色法判断是否含有奇环）
- javascript数据结构——队列
- 【LeetCode算法题库】Day2：Median of Two Sorted Arrays & Longest Palindromic Substring & ZigZag Conversion
- Ultra-QuickSort---poj2299 （归并排序.逆序数.树状数组.离散化）