当前位置: 首页 > news >正文

ElementUI表格 el-table实现自动循环滚动

效果:

<div class=""><el-table ref="xjwTable" :data="jrxjrwData" height="100%" border highlight-current-row @row-click=""><el-table-column prop="xjqy" label="巡检范围"></el-table-column><el-table-column prop="xjry" label="状态" width="70"></el-table-column><el-table-column prop="rwmc" label="任务名称" width="250"></el-table-column></el-table>
</div>

JS:

autoCycle() {//拿到相关元素const wrapper = this.$refs.xjwTable.bodyWrapper;this.timer = setInterval(() => {// 元素自增距离顶部1像素wrapper.scrollTop += 1// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2}}, 50)
},

http://www.dtcms.com/a/304417.html

相关文章:

  • Rust:高效错误处理工具 anyhow
  • 大文档免费翻译方法分享
  • AbMole小课堂丨Blasticidin S(杀稻瘟菌素S)在构建稳转株、抗肿瘤、抗植物病害的跨界应用
  • 6、微服务架构常用十种设计模式
  • 随缘玩 一: 代理模式
  • 算法导论核心代码精粹
  • USRP X440 和USRP X410 直接RF采样架构的优势
  • 【51单片机静态1位数码管显示按键倒计时控制蜂鸣器】2022-9-28
  • Wndows Docker Desktop-Unexpected WSL error
  • AUTOSAR Mcal Dio - 模块介绍 + EB配置工具介绍
  • 【开源项目】轻量加速利器 HubProxy 自建 Docker、GitHub 下载加速服务
  • Doris中文检索效果调优
  • 自组织遗传算法(Self-Organizing Genetic Algorithm, SOGA)求解Rastrigin函数优化问题
  • 【Rust并发集合】如何在多线程中并发安全地使用集合
  • 【AI News | 20250728】每日AI进展
  • 接口自动化测试pytest框架
  • 网络原理--HTTPHTTPS
  • JAVA_TWENTY—ONE_单元测试+注解+反射
  • MySQL——MVCC
  • ftp加ssl,升级ftps
  • 解决Spring MVC中@PathVariable参数为null导致的404问题:全面解析与最佳实践
  • Spring MVC数据传递全攻略
  • 架构实战——互联网架构模板(“网络层”技术)
  • WINCC选项组配置
  • Spring Boot 请求限流实战:基于 IP 的高效防刷策略
  • Postgresql 查询使用正则
  • SQL158 每类视频近一个月的转发量/率
  • Java 大视界 -- Java 大数据在智能教育学习社区知识图谱构建与知识传播分析中的应用(370)
  • DeepCompare文件深度对比软件的差异内容提取与保存功能深度解析
  • Go语言新手村:轻松理解变量、常量和枚举用法