elementui el-table表格自动循环滚动【超详细图解】

 效果如图 

1. 当表格内容超出时,自动滚动,滚动到最后一条之后在从头滚动。

2. 鼠标移入表格中,停止滚动;移出后,继续滚动。

 

 

直接贴代码 

 

<template><div><div class="app-container"><el-tablev-loading="loading":data="tableData":max-height="500"ref="scroll_Table"@mouseenter.native="autoScroll(true)"@mouseleave.native="autoScroll(false)"></el-table></div></div>
</template><script>
import mixins from "./mixins";
export default {data() {return {loading: false,tableData: [],scrolltimer: '', // 自动滚动的定时任务}},mounted() {this.autoScroll()},beforeDestroy() {this.autoScroll(true)},methods: {// 设置自动滚动autoScroll(stop) {const table = this.$refs.scroll_Table// 拿到表格中承载数据的div元素const divData = table.$refs.bodyWrapper// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)if (stop) {//再通过事件监听,监听到 组件销毁 后,再执行关闭计时器。window.clearInterval(this.scrolltimer)} else {this.scrolltimer = window.setInterval(() => {// 元素自增距离顶部1像素divData.scrollTop += 1// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {// 重置table距离顶部距离divData.scrollTop = 0// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2// divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2}}, 150) // 滚动速度}},}
};
</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/740575.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI智能分析网关V4将HTTP消息推送至安防监控视频汇聚EasyCVR平台的操作步骤

TSINGSEE青犀视频智能分析网关V4内置了近40种AI算法模型&#xff0c;支持对接入的视频图像进行人、车、物、行为等实时检测分析&#xff0c;上报识别结果&#xff0c;并能进行语音告警播放。硬件管理平台支持RTSP、GB28181协议、以及厂家私有协议接入&#xff0c;可兼容市面上常…

JavaScript:查找两个正序数组的中位数

中位数&#xff1a;统计学中的专有名词&#xff0c;代表一个样本、种群或概率分布中的一个数值&#xff0c;其可将数值集合划分为相等的上下两部分。对于有限的数集&#xff0c;可以通过把所有观察值高低排序后找出正中间的一个作为中位数。如果观察值有偶数个&#xff0c;通常…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的输电线路设备检测系统(深度学习+UI界面+Python代码+训练数据集)

摘要&#xff1a;本篇博客详细介绍了如何运用深度学习构建一个先进的输电线路设备检测系统&#xff0c;并附上了完整的实现代码。该系统利用了最新的YOLOv8算法作为其核心&#xff0c;同时也对之前版本的YOLOv7、YOLOv6、YOLOv5进行了性能比较&#xff0c;包括但不限于mAP&…

Pytorch搭建AlexNet 预测实现

1.导包 import torch import matplotlib.pyplot as plt import json from model import AlexNet from PIL import Image from torchvision import transforms 2.数据预处理 data_transform transforms.Compose([transforms.Resize((224, 224)), # 将图片重新裁剪transform…

<线性回归算法(Linear regression)>——《机器学习算法初识》

目录 一、线性回归简介 1 线性回归应用场景 2 什么是线性回归 2.1 定义与公式 2.2 线性回归的特征与目标的关系分析 3 小结 二、线性回归的损失和优化 1 损失函数 2 优化算法 2.1 正规方程 2.1.1 什么是正规方程 2.1.2 正规方程求解举例 2.1.3 正规方程的推导 2.…

学习python笔记:3,条件判断,while循环,for循环,嵌套循环

注意&#xff1a; condition后面有冒号&#xff1a; 换行之后的代码要对齐。 条件判断 if 在Python中&#xff0c;if 语句用于基于某个条件&#xff08;或一系列条件&#xff09;来执行代码块。如果条件为真&#xff08;True&#xff09;&#xff0c;则执行 if 语句下的代码…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的田间杂草检测系统(深度学习模型+UI界面+Python代码+训练数据集)

摘要&#xff1a;开发用于田间杂草识别的系统对提高农业运营效率和提升作物产出至关重要。本篇文章详尽阐述了如何应用深度学习技术开发一个用于田间杂草识别的系统&#xff0c;并附上了完备的代码实现。该系统基于先进的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5…

AXI CANFD MicroBlaze 测试笔记

文章目录 前言测试用的硬件连接Vivado 配置Vitis MicroBlaze CANFD 代码测试代码测试截图Github Link 前言 官网: CAN with Flexible Data Rate (CAN FD) (xilinx.com) 特征: 支持8Mb/s的CANFD多达 3 个数据位发送器延迟补偿(TDC, transmitter delay compensation)32-deep T…

在Linux/Ubuntu/Debian中设置字体

下载字体。 下载你喜欢的字体&#xff0c;双击并安装。 之后更新字体缓存&#xff1a; fc-cache -f -v安装 GNOME 调整。 GNOME Tweaks 是一个工具&#xff0c;允许你自定义 GNOME 桌面环境的各个方面&#xff0c;包括字体。 如果你还没有安装 GNOME Tweaks&#xff1a; …

PLC实验—西门子S7 1200读取旋转编码器数据并计算电机转速

PLC实验—西门子S7 1200读取旋转编码器数据并计算电机转速 注意PTO控制步进电机实验博途软件需要V14版本&#xff0c;不然没有PTO功能块 软件的下载请点击下方百度网盘的链接 链接&#xff1a;https://pan.baidu.com/s/11mQFVnaQxrUy4W9nGIk8Jw 提取码&#xff1a;6lva 详细的…

ubuntu20.04上获取Livox Avia雷达点云数据

若拿到手的Livox Avia激光雷达不知道它的ip信息&#xff0c;可以在官网上LiDAR Sensors - Livox下载上位机软件Livox Viewer&#xff0c;查看IP&#xff0c;下载window版本就可以。雷达通过网线连上电脑后&#xff0c;该软件就可以自动识别出来。按照下图步骤&#xff0c;就可以…

高性能 数据库连接池 HikariCP | HikariCP 配置详解

👀 上节回顾:上一节对 HikariCP 数据源进行了构造。 👉 本节目标:了解构造 HikariCP 数据源的配置的含义,便于更好、更合理的配置 HikariCP。 HikariCP 对配置进行了思考,为开发人员们提供了一些明智的默认配置,所以大多数情况下,我们是不需要调整配置的。除了基本配…

【功能大全】手机短信验证码一键注册登录流程

目录 发送验证码 注册登录 用户表设计 ​编辑申请腾讯云短信与密钥 找到云短信服务 开通腾讯云短信服务 ​编辑​​​​​创建短信签名 ​编辑​编辑创建短信正文模版​编辑​编辑 等待审核 测试短信​编辑 SDK密钥创建 SpringBoot集成腾讯云短信 pom中导入腾讯云短…

二分查找的梳理——边界初始值、循环条件、边界更新

文章目录 1 来源2 思考2.1 区间的选择——由区间决定写法2.2 重点&#xff1a;右边界初始值、循环条件、边界更新2.3 两种写法详解2.3.1 左闭右闭的写法2.3.2 左闭右开的写法 1 来源 手把手带你撕出正确的二分法 | 二分查找法 | 二分搜索法 | LeetCode&#xff1a;704. 二分查…

学习笔记-华为IPD转型2020:1,IPD的重要意义

华为产品开发转型&#xff1a;IPD计划 大多数公司发现&#xff0c;当公司大幅增长时&#xff0c;在较小规模上有效的管理实践不再有效。产品开发过程也是如此。随着华为的发展&#xff0c;该公司遇到了产品故障率更高、开发周期更长和研发成本增加等问题。然后&#xff0c;它转…

LeetCode 2885.重命名列

DataFrame students ------------------- | Column Name | Type | ------------------- | id | int | | first | object | | last | object | | age | int | ------------------- 编写一个解决方案&#xff0c;按以下方式重命名列&#xff1a; id 重命名为 student_id first 重…

Tomcat数据源笔记

Tomcat数据源笔记 连接池的概念 连接池是一种由容器提供的机制&#xff0c;用于管理数据库连接对象的集合。连接池的主要作用是在应用程序需要与数据库进行交互时&#xff0c;提供可复用的连接对象&#xff0c;从而减少每次建立数据库连接的开销。 连接池的工作原理 连接池的…

软件工程---原型评价

在原型被构建后&#xff0c;由开发人员组织实施测试&#xff0c;测试是原型评价的一个重要组成部分。 但是测试用例一般不能发现所有的缺陷&#xff0c;所以说测试也不是万能的。 Dam和Siang提出了几个获取原型反馈的最佳实践技巧&#xff1a; 1. 在要求原型反馈时提供框架素…

小米汽车SU7定档发布,雷军携智能科技赴三年之约

大家好&#xff01; 我是老洪。 刚刚浏览到一则关于小米汽车的新闻&#xff0c;内容颇为引人关注。 小米SU7&#xff0c;这款备受期待的新能源汽车&#xff0c;已经正式定档在3月28日发布。 雷军&#xff0c;小米的掌舵人&#xff0c;已经明确表示&#xff0c;他们对即将到来的…

【LeetCode】739. 每日温度(中等)——代码随想录算法训练营Day58

题目链接&#xff1a;739. 每日温度 题目描述 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在…