当前位置:网站首页>设置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()
},
边栏推荐
猜你喜欢
窥探晶体世界的奥秘 —— 230种空间群晶体结构模型全在这里
Interpretation of EfficientNet: Composite scaling method of neural network (based on tf-Kersa reproduction code)
MAML principle explanation and code implementation
花了近70美元入手的学生版MATLAB体验到底如何?
科研绘图图表类型种类繁多,本文告诉你如何选择!
SENet详解及Keras复现代码
数据库:整理四个实用的SQLServer脚本函数
JVM工具之 JPS
数据库技巧:整理SQLServer非常实用的脚本
Error occurred while trying to proxy request项目突然起不来了
随机推荐
目标检测中的先验框(Anchor)
A priori box (Anchor) in target detection
NelSon:一款新的适配matlab编程语法的编程工具
电脑知识:台式电脑应该选择品牌和组装,值得收藏
MySQL内存淘汰策略
Verilog“七宗罪”
Mac安装PHP开发环境
pycharm专业版使用
Computer knowledge: desktop computers should choose the brand and assembly, worthy of collection
ffmpeg打开rtsp流应该设置的几个参数
matlab科研绘图模板,直接奉上源代码!
【C# - 爬虫】使用Selenium实现爬虫,获取近七天天气信息(包含完整代码)
MySQL重置root密码
搭建redis哨兵
golang rtsp拉流测试
JVM工具之 JPS
叔本华的《人生的智慧》感悟
Time Series Forecasting Based on Reptile Search RSA Optimized LSTM
缓动动画,有关窗口的一些常见操作,BOM操作
格拉姆角场GAF将时序数据转换为图像并应用于故障诊断