element plus的表格内容自动滚动

ops/2024/11/17 5:09:47/

在这里插入图片描述

                        <el-table:data="tableData"ref="tableRef"borderstyle="width: 100%"height="150"><el-table-column prop="date" label="名称" width="250" /><el-table-column prop="name" label="订单数" width="180" /><el-table-columnprop="address"label="平均评分"width="180" /></el-table>
javascript"><script lang="ts" setup>
import { ref, onMounted } from "vue"
const tableRef = ref(null)
onMounted(() => {const tableBody = (tableRef as TypeAny).value.$refs.bodyWrapperconst tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0]let isScroll = truetableDom.addEventListener("mouseover", () => {isScroll = false})tableDom.addEventListener("mouseout", () => {isScroll = true})setInterval(() => {if (isScroll) {tableDom.scrollTop += 1if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {tableDom.scrollTop = 0}}}, 150)
})
</script>

http://www.ppmy.cn/ops/134338.html

相关文章

版本控制-Git

版本控制 一、概念 版本控制是管理修改的艺术指对软件开发过程中各种程序代码、配置文件及说明文档等文件的变更管理是软件管理配置的核心思想之一 二、好处 优雅的备份&#xff1a; 本地和服务器均保存备份文件&#xff0c;当本地出现问题时可以通过服务器修复 多人并行开发&…

计算器上的MC、MR、M+、M—、CE是什么意思?

在计算器中&#xff0c; MC键叫做memory clear&#xff0c;中文 清除存储&#xff0c;是一个清除寄存器中存储数字的指令。 MS键叫做memory save&#xff0c;中文 存入存储。 而MR键&#xff0c;则是一个读取原先存储在寄存器中的数字的指令。 M键指将当前数值存入寄存器以…

docker使用,docker图形化界面+docker详细命令

DockerUI进入 docker container run --rm --name docker.ui -v /var/run/docker.sock:/var/run/docker.sock -p 8999:8999 joinsunsoft/docker.ui访问8999端口就行&#xff0c;就可以图形化管理Docker了 常规使用 搭建 sudo docker-compose build #有一些需要这条命令 su…

Linux下编译安装Nginx

以下是在Linux下编译安装Nginx的详细步骤&#xff1a; 一、安装依赖库 安装基本编译工具和库 在Debian/Ubuntu系统中&#xff0c;使用以下命令安装&#xff1a;sudo apt -y update sudo apt -y install build - essential libpcre3 - dev zlib1g - dev libssl - dev在CentOS/…

JVM——类加载器、类加载器的分类

类加载器是java虚拟机提供给应用程序去 实现获取类和接口字节码数据 的技术 类加载器的分类&#xff1a; 一类是 Java代码中实现的一类是 Java虚拟机底层源代码实现的 通常可以细分为三大类&#xff1a;jdk8版本中的 java代码中的 扩展类加载器&#xff1a;Extension 允许扩…

VMware高危漏洞VMSA-2024-0019修复堆溢出和权限提升漏洞

一、概述 VMware vCenter Server 高危漏洞&#xff08;CVE-2024-38812、CVE-2024-38813&#xff09;再次受到攻击&#xff0c;需要升级补丁&#xff0c;详情查看之前文章紧急通告VMware vCenter高危漏洞CVE-2024-38812和CVE-2024-38813修复方案 再次更新了漏洞 二、漏洞影像描…

三分频电路设计

文章目录 偶数分频二分频更大的2N偶数 奇数分频三分频 偶数分频 通常情况下&#xff0c;偶数倍分频器&#xff0c;可以借助计数器实现。 二分频 最简单的&#xff0c;二分频时&#xff0c;直接把输入时钟加到D触发器上&#xff0c;输出端Q取反后&#xff0c;接回输入D端&…

【Qt聊天室客户端】消息功能--发布程序

1. 获取文件内容 主要目标是实现获取内容二进制数据的接口&#xff0c;主要是为后面的消息功能提供服务 具体实现 客户端发送请求 服务端处理请求&#xff0c;同时支持三种数据类型 客户端处理服务端的响应 2. 发送图片消息 客户端与服务端的通信约定 客户端从服务器中获取图片…