使用el-table实现自动滚动

文章目录

    • 概要
    • 技术实现
    • 完整代码

概要

在前端开发大屏的时候,我们会用到表格数据展示,有时候为了使用户体验更加好,会增加表格自动滚动。下边我将以示例代码,用element UI的el-table来讲一下。

技术实现

1 .增加dom监听,鼠标放上去的时候不滚动,鼠标离开的时候滚动

  	  let status = true;scrollDom.addEventListener('mouseover', () => {status = false;});scrollDom.addEventListener('mouseout', () => {status = true;});

2 通过判断dom的scrollHeight和scrollTop的关系,来实现滚动

	this.timer = setInterval(() => {if (status) {debuggerscrollDom.scrollTop += 1;if (scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop) < 1) {scrollDom.scrollTop = 0;}}}, 100);

3.当不需要使用,或者表格需要重新渲染的时候,我们需要清掉定时器

  clearInterval(this.timer);

完整代码

 startAutoScroll() {const scrollDom = this.$refs.tableList.bodyWrapper;let status = true;scrollDom.addEventListener('mouseover', () => {status = false;});scrollDom.addEventListener('mouseout', () => {status = true;});this.timer = setInterval(() => {if (status) {debuggerscrollDom.scrollTop += 1;if (scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop) < 1) {scrollDom.scrollTop = 0;}}}, 100);},

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

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

相关文章

Linux搭建Kubernetes集群(单Master)【附图文】

文章目录 一、集群环境配置要求二、主机准备三、初始环境准备1.关闭防火墙2.关闭 selinux3.关闭swap4.加载 br_netfilter 模块5.允许iptables转发流量6.设置时间同步 四、安装Docker五、安装kubeadm, kubectl, kubelet六、在Master节点部署集群七、将 node 节点加入集群八、部署…

(一)Readme 了解kurator

Kurator 是一个开源的分布式云原生平台&#xff0c;旨在帮助用户构建自己的分布式云原生基础设施&#xff0c;并出金企业进行数字化转型。 概览 云原生软件栈&#xff1a;kurator结合了多种流行的云原生软件栈&#xff08;Kubernetes、Istio、Prometheus等&#xff09;&#…

学习笔记14:CNAME 记录值、TTL (Time to Live)、Redis 的 Pool 对象池、钩子函数、依赖注入

CNAME 记录值 CNAME 记录是一种DNS记录类型&#xff0c;它将一个域名映射到另一个域名。这通常用于将一个子域名指向另一个域名&#xff0c;或者将一个域名指向一个不同的顶级域。 用途&#xff1a;用于域名别名&#xff0c;负载均衡&#xff0c;或者在更换域名时保持服务的连…

CSS(四)——CSS Text(文本)

CSS Text(文本&#xff09; 文本颜色 颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定&#xff1a; 十六进制值 - 如: &#xff03;FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 一个网页的背景颜色是指在主体内的选择&#xff0c;即<body…

【C#】Func、Action和Predicate

使用情景 根据不同参数值&#xff0c;执行不同方法&#xff0c;执行完方法后&#xff0c;执行相同的操作 函数 Func Func 委托表示有返回值的方法。它最多可以接受 16 个输入参数&#xff0c;并且必须返回一个值。在 Func 委托中&#xff0c;最后一个类型参数始终是返回类型…

【C语言】英寸英尺转换米

运行的结果为 我们百度一下 恒明显我们的答案错了,那这个是为什么呢? 问题就出现在计算的地方,c语言规定两个整数计算,那么小数的部分会被丢弃. 如果计算的两个数中有一个数为小数,那么会将两个数都变为小数在进行计算,结果也会是小数. 那么我们现在就有解决办法了. 方法一…

gbase8s自动同步数据及加入集群的脚本

cat remote.sh #!/bin/bash #此脚本永远在主节点上执行&#xff0c;需要同步的节点永远是备节点 #主节点pri开头&#xff0c;备节点hac开头 #开始执行脚本之前一定要关闭hac节点&#xff0c;并且系统空间要大于备份数据文件的大小 #执行之前请手动改好ip和主备节点的实例名及g…

开源浪潮下的航行:趋势洞察与个人航迹

引言 在全球经济与科技浪潮的推动下&#xff0c;开源软件项目如同一股不可阻挡的洪流&#xff0c;正以前所未有的速度席卷整个技术生态。它不仅促进了技术的快速迭代与创新&#xff0c;更搭建起了一个跨越国界、行业与组织的协作平台。本文旨在探讨当前开源项目的发展趋势&…

SSH不用每次都输入密码的方法

首先&#xff0c;打开自己电脑上的终端cmd 输入&#xff1a; ssh-keygen -t rsa 一直回车。 然后我的服务器因为某些原因不能直接复制到远程终端 所以我手动复制&#xff0c;先打开要复制的公钥。这个地址就看你的程序默认给你创建的文件在哪里了。 cat .ssh/id_rsa.pub 这个--…

【时时三省】unity test 测试框架 下载

目录 1&#xff0c;unity test 测试框架介绍 2&#xff0c;源码下载 3&#xff0c;目录架构 4&#xff0c;git for window 下载安装方法&#xff1a; 1&#xff0c;unity test 测试框架介绍 Unity是一个用于C语言的轻量级单元测试框架。它由Throw The Switch团队开发&#…

Umi-OCR:功能强大且易于使用的本地照片识别软件

Umi-OCR是一款开源且免费的离线OCR&#xff08;光学字符识别&#xff09;软件&#xff0c;可让您轻松从照片中提取文本。它支持多种语言&#xff0c;并具有许多其他功能使其成为照片识别任务的绝佳选择。 Umi-OCR的优势 离线操作&#xff1a; Umi-OCR无需互联网连接即可工作&…

【算法】分割回文串

难度&#xff1a;中等 题目&#xff1a; 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串。返回 s 所有可能的分割方案。 示例 1&#xff1a; 输入&#xff1a;s “aab” 输出&#xff1a;[[“a”,“a”,“b”],[“aa”,“b”]] 示…

PyMySQL库的使用方法

过程和步骤&#xff1a; 安装 PyMySQL 首先&#xff0c;需要使用 pip 安装 PyMySQL 库&#xff1a; pip install pymysql连接数据库 使用 PyMySQL.connect() 方法可以建立到 MySQL 数据库的连接&#xff1a; import pymysql# 配置数据库连接参数 config {host: localhost…

鸿蒙开发仓颉语言【在工程中使用Hyperion TCP框架】

3. 在工程中使用Hyperion TCP框架 3.1 导入Hyperion TCP框架的静态库 在工程的module.json中引入Hyperion TCP框架的静态库&#xff1a; "package_requires": {"package_option": {"hyperion_hyperion.buffer": "${path_to_hyperion_proj…

启发式缓存和本地存储缓存

启发式缓存详解 当服务器响应中没有包含 Expires、Cache-Control: max-age 或 Cache-Control:s-maxage 时,浏览器会采用一个启发式的算法来确定缓存的时间。 1. 启发式缓存的计算方法 通常,启发式缓存会根据响应头中的 Date 和 Last-Modified 之间的时间差来计算缓存时间。 …

【算法】01背包

算法-01背包 前置知识 DP 思路 01背包一般分为两种&#xff0c;不妨叫做价值01背包和判断01背包。 价值01背包 01背包问题是这样的一类问题&#xff1a;给定一个背包的容量 m m m 和 n n n 个物品&#xff0c;每个物品有重量 w w w 和价值 v v v&#xff0c;求不超过背…

Linux命令更新-文本处理grep

简介 grep命令是Linux系统中用于查找文本文件内容的实用工具。它可以根据指定的模式在文件中搜索文本&#xff0c;并显示匹配的行。grep命令功能强大&#xff0c;易于使用&#xff0c;是运维人员必备的工具之一。 命令格式 grep命令的基本格式如下&#xff1a; grep [选项] …

基于Windows系统和linux系统,实现samba文件共享服务,

1.设置IP地址&#xff1a; vim /etc/sysconfig/network-scripts/ifcfg-ens33 2.关闭防火墙和selinux [roots ~]# systemctl stop firewalld [roots ~]# systemctl disable firewalld [roots ~]# vim /etc/selinux/config [roots ~]# setenforce 0 [roots ~]# 3.重启网络服…

Photoshop橡皮擦工具

Photoshop&#xff08;简称PS&#xff09;中的橡皮擦工具是图像编辑中不可或缺的一部分&#xff0c;它主要用于擦除图像中的特定区域&#xff0c;让图像编辑变得更加灵活和高效。本教程将详细讲解橡皮擦工具及其变体&#xff08;背景橡皮擦工具和魔术橡皮擦工具&#xff09;的使…

Adobe国际认证详解-职业发展规划指南

Adobe国际认证&#xff0c;又称为Adobe Certified Professional&#xff08;简称ACP&#xff09;&#xff0c;是Adobe公司CEO签发的权威国际认证体系。这一认证体系基于Adobe核心技术及岗位实际应用操作能力的测评&#xff0c;旨在为用户提供创意软件的专业认证。 Adobe国际认证…