当前位置:网站首页>设置el-table自动向下滑动(不多解释,直接代码实现)
设置el-table自动向下滑动(不多解释,直接代码实现)
2022-08-04 05:40:00 【观山.】
//data中添加变量
refreshTime: 5,
rollTime: 5,
rollPx: 1,
//给表格属性添加事件
<el-table :data="PT_tableData" border height="390" ref="rw_table" @mouseenter.native="mouseEnter" @mouseleave.native="mouseLeave" style="width: 90%; margin: auto">
<el-table-column prop="name" :label="translateTitle('displayConcepts.columns.指标名称')" width="180" />
<el-table-column prop="current_value" :label="translateTitle('displayConcepts.columns.当前值')" width="100" />
<el-table-column prop="warning_value" :label="translateTitle('displayConcepts.columns.报警上下限')" />
</el-table>
//给表格设置的事件添加在methods
mouseEnter(time) {
// 鼠标进入停止滚动和切换的定时任务
this.autoRoll(true)
},
// 鼠标离开
mouseLeave() {
// 开启
this.autoRoll()
},
//自动滑动的事件
autoRoll(stop) {
if (stop) {
clearInterval(rolltimer)
return
}
// 拿到表格挂载后的真实DOM
const table = this.$refs.rw_table
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper
//0下滑,1上滑
let sign = 1
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果
rolltimer = setInterval(() => {
// 元素自增距离顶部像素
divData.scrollTop += sign
if (Math.ceil(divData.clientHeight + divData.scrollTop) == divData.scrollHeight) {
// 重置table距离顶部距离
sign = -1
} else if (divData.scrollTop == 0) {
sign = 1
}
}, this.rollTime * 10)
},
在数据加载完之后执行自动滚动的事件
mounted() {
this.autoRoll()
},
边栏推荐
猜你喜欢
VMD combined with ISSA to optimize LSSVM power prediction
狗都能看懂的Pytorch MAML代码详解
90多款matlab工具箱打包放送
HbuilderX 启动微信小程序 无法打开项目
数据库技巧:整理SQLServer非常实用的脚本
Network skills: teach you to install batteries on the router, you can still surf the Internet when the power is cut off!
Mac安装PHP开发环境
Detailed explanation of DenseNet and Keras reproduction code
MySQL内存淘汰策略
基于EEMD+GRU+MLR的时间序列预测
随机推荐
MySQL外键(详解)
DropBlock: 卷积层的正则化方法及复现代码
ResNet详解:ResNet到底在解决什么问题?
pycharm专业版使用
格拉姆角场GAF将时序数据转换为图像并应用于故障诊断
七夕专属程序员的浪漫
科研绘图图表类型种类繁多,本文告诉你如何选择!
狗都能看懂的CenterNet讲解及代码复现
SENet详解及Keras复现代码
MySQL - Row size too large (> 8126). Changing some columns to TEXT or BLOB
SQL如何从字符串截取指定字符(LEFT、MID、RIGHT三大函数)
类图规范总结
布隆过滤器
搭建redis哨兵
QT 显示窗口到最前面(非置顶)
Faster - RCNN principle and repetition code
天鹰优化的半监督拉普拉斯深度核极限学习机用于分类
RHCE之路----全
狗都能看懂的Pytorch MAML代码详解
Base64编码原理