当前位置:网站首页>设置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()
},
边栏推荐
猜你喜欢
QT QOpenGLWidget 全屏导致其他控件显示问题
Verilog“七宗罪”
目标检测中的IoU、GIoU、DIoU与CIoU
MySQL(4)
Error ER_NOT_SUPPORTED_AUTH_MODE Client does not support authentication protocol requested by serv
数据库知识:SQLServer创建非sa用户笔记
科研绘图图表类型种类繁多,本文告诉你如何选择!
Hardware Knowledge: Introduction to RTMP and RTSP Traditional Streaming Protocols
Error occurred while trying to proxy request项目突然起不来了
IDEA中创建编写JSP
随机推荐
QT signals 保存到 QMap
MySQL内存淘汰策略
基于爬行动物搜索RSA优化LSTM的时间序列预测
Promise.all 使用方法
MySQL错误-this is incompatible with sql_mode=only_full_group_by完美解决方案
解决腾讯云DescribeInstances api查询20条记录以上的问题
对象的扩展补充
golang chan
Implementation of ICEEMDAN Decomposition Code in MATLAB
对产品设计,架构设计的一点思考
SQL存储过程详解
微软电脑管家2.0公测版体验
基于子空间结构保持的迁移学习方法MLSSM
ThreadLocal内存泄漏问题讲解
【音视频开发系列】fdk_aac 之 PCM 转 AAC
SENet详解及Keras复现代码
MATLAB 的ICEEMDAN分解代码实现
IoU, GIoU, DIoU and CIoU in target detection
狗都能看懂的Vision Transformer的讲解和代码实现
Sql优化总结!详细!(2021最新面试必问)