当前位置:网站首页>设置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()
},
边栏推荐
- 如何用matlab做高精度计算?【第二辑】
- DropBlock: 卷积层的正则化方法及复现代码
- 事件链原理,事件代理,页面的渲染流程,防抖和节流,懒加载和预加载
- ES6新语法:symbol,map容器
- VMD combined with ISSA to optimize LSSVM power prediction
- idea使用@Autowired注解爆红原因及解决方法
- IDEA 控制台 中文乱码问题(如果网上教程都无法解决你的问题的话)
- Unable to preventDefault inside passive event listener due to target being treated as passive. See
- 数据库技巧:整理SQLServer非常实用的脚本
- Interpretation of EfficientNet: Composite scaling method of neural network (based on tf-Kersa reproduction code)
猜你喜欢
随机推荐
网页中常用的两种绘图技术,用canvas绘图,绘制出一个三角形,矩形,柱状图,扇形图
Microsoft computer butler 2.0 beta experience
A semi-supervised Laplace skyhawk optimization depth nuclear extreme learning machine for classification
数据库文档生成工具V1.0
SENet detailed explanation and Keras reproduction code
搭建redis哨兵
Based on the EEMD + + MLR GRU helped time series prediction
Time Series Forecasting Based on Reptile Search RSA Optimized LSTM
GRNN、RBF、PNN、KELM之间究竟有什么联系?
专属程序员的浪漫七夕
set集合
Error EPERM operation not permitted, mkdir ‘Dsoftwarenodejsnode_cache_cacach两种解决办法
DropBlock: 卷积层的正则化方法及复现代码
Database: Organize Four Practical SQL Server Scripting Functions
Different lower_case_table_names settings for server (‘1‘) and data dictionary (‘0‘) 解决方案
什么是多态。
53个全球免费学术资源数据库整理,查资料写论文必备【开学必备】
Unable to preventDefault inside passive event listener due to target being treated as passive. See
缓动动画,有关窗口的一些常见操作,BOM操作
如何用matlab做高精度计算?【第二辑】









