当前位置: 首页 > 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.lryc.cn/news/603596.html

相关文章:

  • MySQL图解索引篇
  • JavaWeb(苍穹外卖)--学习笔记15(分页查询PageHelper)
  • JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
  • 一个人开发一个App(数据库)
  • vue3组件通信的几种方法,详解
  • ​第七篇:Python数据库编程与ORM实践
  • Vue 2.0响应式原理深度解析
  • 【C++算法】82.BFS解决FloodFill算法_被围绕的区域
  • 基于SpringBoot和Leaflet集成在线天气服务的区县当前天气WebGIS实战
  • 【CSS】盒子类型
  • Linux网络:多路转接 select
  • 7月29号打卡
  • 个人健康管理小程序(消息订阅、Echarts图形化分析)
  • C# CAN通信上位机系统设计与实现
  • Hyperchain安全与隐私机制详解
  • Prometheus + Grafana + Micrometer 监控方案详解
  • CodeRush AI 助手进驻 Visual Studio:AiGen/AiFind 亮相(三)
  • 【数据可视化-74】电信用户流失数据可视化分析:Python + Pyecharts 炫酷大屏(含完整的数据,代码)
  • Visual Studio的妙用
  • 【22】C# 窗体应用WinForm ——定时器Timer属性、方法、实例应用,定时切换画面
  • 从github同步新项目的两次挫折-2025.7.29
  • 工业补贴携手华为云,重塑汽车零部件供应链管理新趋势
  • 设计模式:状态模式 State
  • Ragflow 文档处理深度解析:从解析到存储的完整流程
  • Go语言新手村:轻松理解变量、常量和枚举用法
  • [工具类] 分片上传下载,MD5校验
  • 【Spring Boot 快速入门】三、分层解耦
  • 飞算JavaAI:数据库插件安装与表结构设计的智能革命
  • 室内环境具身智能语义建图研究综述:进展、挑战与未来方向
  • SpringBoot整合RocketMQ(阿里云ONS)