当前位置:网站首页>设置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()
},
边栏推荐
- GRNN、RBF、PNN、KELM之间究竟有什么联系?
- golang rtsp拉流测试
- 如何用matlab做高精度计算?【第三辑】(完)
- ERROR 2003 (HY000) Can‘t connect to MySQL server on ‘localhost3306‘ (10061)解决办法
- Microsoft computer butler 2.0 beta experience
- 元素的增删克隆以及利用增删来显示数据到页面上
- 【C# - 爬虫】使用Selenium实现爬虫,获取近七天天气信息(包含完整代码)
- IDEA中创建编写JSP
- 【音视频开发系列】QT 采集麦克风PCM并播放
- MAML原理讲解和代码实现
猜你喜欢
随机推荐
Unable to preventDefault inside passive event listener due to target being treated as passive. See
mysql:列类型之float、double
JVM调优实践
Error EPERM operation not permitted, mkdir ‘Dsoftwarenodejsnode_cache_cacach两种解决办法
MySQL - Row size too large (> 8126). Changing some columns to TEXT or BLOB
Microsoft computer butler 2.0 beta experience
IDEA中创建编写JSP
DropBlock: 卷积层的正则化方法及复现代码
狗都能看懂的Self-Attention讲解
Gramm Angle field GAF time-series data into the image and applied to the fault diagnosis
无监督特征对齐的迁移学习理论框架
golang 的库引用方法
用matlab打造的摩斯电码加解码器音频版,支持包括中文在内的任意字符
什么是多态。
LeetCode(剑指 Offer)- 18. 删除链表的节点
软件:给大家推荐一款国产非常好用的效率软件uTools
如何用matlab做高精度计算?【第一辑】
基于爬行动物搜索RSA优化LSTM的时间序列预测
ES6新语法:symbol,map容器
手把手教你Charles抓包工具使用









