vue3+elementPlus实现无缝滚动表格封装

vue3+elementPlus+css+js 模拟liMarquee插件,实现无限滚动效果

功能:1、表格数据大于一定数量之后,开始向上滚动

           2、当鼠标移入的时候,动画停止,鼠标移出,继续动画

           3、滚动动画的速度可以自定义

           4、表格的高度固定

           5、向上滚动时,无限滚动,不存在卡顿

<template>

  <div

    class="scrolling-table-container"

    @mouseenter="pauseAnimation"

    @mouseleave="resumeAnimation"

  >

    <div class="table-wrapper" :style="{ height: tableHeight }">

      <el-table

        :data="displayData"

        :loading="loading"

        style="width: 100%"

        :show-header="showHeader"

        :row-key="rowKey"

        class="scrolling-table"

        :class="{

          'enable-scroll': needScroll,

          'is-paused': isPaused

        }"

      >

        <el-table-column

          v-for="column in columns"

          :key="column.prop"

          :prop="column.prop"

          :label="column.label"

          :width="column.width"

          :min-width="column.minWidth"

          :fixed="column.fixed"

        >

          <template #default="scope" v-if="column.hasSlot">

            &

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

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

相关文章

AI赋能企业内训:2025智能化教育培训系统源码开发全解析

从线下集中授课到线上碎片化学习&#xff0c;从被动灌输到主动交互&#xff0c;越来越多企业开始关注“企业内训系统”的智能化升级。而这一切的背后&#xff0c;离不开AI技术的深度赋能。 笔者认为&#xff0c;2025年将是企业内训系统“从信息化走向智能化”的关键拐点。本篇…

旅游安全急救实训室:构建旅游行业安全人才培养新范式

在文旅产业蓬勃发展与安全应急需求日益凸显的背景下&#xff0c;旅游安全急救能力已成为从业者的核心素养之一。当前&#xff0c;旅游市场突发状况频发&#xff0c;如景区意外事故、游客突发疾病等&#xff0c;对从业人员的急救技能提出了更高要求——既要掌握基础急救操作&…

网络编程及原理(六):三次握手、四次挥手

目录 一 . TCP 的核心机制&#xff1a;连接管理 二 . 三次握手&#xff1a;建立连接 &#xff08;1&#xff09; 三次握手的意义 &#xff08;1.1&#xff09;初步验证通信链路是否流畅 &#xff08;1.2&#xff09;确认通信双方各自的发送、接受能力是否正常 &…

【LLaMA 3实战】2、LLaMA 3对话能力全解析:从架构革新到多智能体实战指南

引言:LLaMA 3对话能力的革命性突破 当Meta发布LLaMA 3时,其对话能力的跃升重新定义了开源大模型的边界。这款拥有128K上下文窗口的开源模型,不仅在MT-Bench评测中超越GPT-3.5,更通过分组查询注意力(GQA)等架构创新,实现了推理速度30%的提升。 本文将从底层架构到应用实战…

面试题-在ts中类型转换的方法

在 TypeScript 中&#xff0c;类型转换主要分为 类型断言&#xff08;Type Assertion&#xff09;、类型守卫&#xff08;Type Guard&#xff09; 和 类型兼容转换 三种方式。以下是详细分类和示例&#xff1a; 一、类型断言&#xff08;Type Assertion&#xff09; 强制编译…

IIS配置SSL证书

公司的一个项目使用IIS部署的网站&#xff0c;现在需要更新SSL证书。为了下次方便&#xff0c;在此做记录整理。 以下第一部分是查网络AI查询到的资料&#xff0c;解决了我心中对双击和从IIS导入有什么不同的疑惑。第二部分是我在这次实际操作过程中的截图。 一.证书安装方式 …

K8s初始化容器与边车容器比对

Kubernetes 中的初始化容器和边车容器 Kubernetes 作为一个开源容器编排平台&#xff0c;引入了强大的概念来管理和增强 Pod 内容器的功能。其中两个概念是初始化容器&#xff08;Init Containers&#xff09;和边车容器&#xff08;Sidecar Containers&#xff09;。尽管这两…

无线Debugger攻防全解:原理剖析与突破之道

引言​​ 在Web安全防护体系中&#xff0c;反调试技术已成为对抗爬虫和分析的关键武器。2023年OWASP报告显示&#xff0c;Top 1000网站中92%部署了反调试机制&#xff0c;其中​​无线Debugger技术​​&#xff08;也称为无限Debug&#xff09;因其难以破解的特性&#xff0c;…

Eslint自定义规则使用

文章目录 前言场景设定&#xff1a;维护代码分层&#xff0c;禁止“跨级调用”实现步骤&#xff1a;从零到一&#xff0c;创建你的第一条自定义规则**第 1 步&#xff1a;创建规则文件****第 2 步&#xff1a;在 eslint.config.mjs 中注册并启用你的规则** 验证成果 前言 设计…

深入剖析Spring Cloud Gateway,自定义过滤器+断言组合成拦截器链实现Token认证

一、Spring Cloud Gateway网关的整体架构 Spring Cloud Gateway 是 Spring Cloud 官方推出的网关解决方案&#xff0c;旨在替代 Netflix Zuul 1.x。其底层基于 Spring WebFlux Reactor 模型 构建&#xff0c;具备响应式、异步非阻塞的高性能特点。 1. 整体架构图 ----------…

VMware Workstation Pro下Centos 7.9 安装

背景系统安装方案1、VMware安装    1.1、下载    1.2、安装 2、Centos 7.9 安装    2.1 、Centos7.9 iso 下载    2.2、使用VMware 安装    2.2.1、VMware配置虚拟机    2.2.2、Linux安装 结语 背景 本文所在专栏的所有文章基于Centos7.9系统来演示&#xff0c;系…

我做个一个APP叫【图影工具箱】:一站式解决视频提取音频和加水印的鸿蒙神器

在数字内容创作和日常使用手机的过程中&#xff0c;提取视频音频、处理图片和视频水印是一大需求。许多人在寻找合适的软件时&#xff0c;往往试遍各种工具却仍无法满足需求。所以&#xff0c;我做了一款应用 —— 图影工具箱&#xff0c;一站式解决这些令人头疼的问题。 图影…

【StarRocks系列】查询语句执行全流程

目录 StarRocks 查询数据流程详解 1. 提交查询语句 2. FE 解析与优化 3. 选择 BE 节点与数据路由 4. BE 数据读取与计算 5. 结果返回 关键优化点总结 示例流程 流程图 StarRocks 查询数据流程详解 StarRocks 采用分布式 MPP 架构&#xff0c;查询流程涉及 FE&#xff…

HarmonyOS 5的分布式通信矩阵是如何工作的?

HarmonyOS 5 的分布式通信矩阵通过多层级技术协同实现跨设备高效协同&#xff0c;其核心工作机制如下&#xff1a; 一、核心架构&#xff1a;分布式软总线 3.0‌ ‌动态拓扑感知‌ 设备自动发现并构建最优传输路径&#xff08;如手机与智慧屏优先采用 Wi-Fi P2P 直连&#xf…

自定义Django rest_framework中response的示例

在实际项目开发中&#xff0c;原有框架的response可能并不能完全满足我们的需求。比如我们需要定义一些更加详细的RESULT_CODE来说明情况。那么我们就可以基于原有的response进行自定义。 下面是一个自定义Django rest_framework中response的示例 # -*- coding:utf-8 -*- imp…

如何开发HarmonyOS 5的分布式通信功能?

以下是基于HarmonyOS 5开发分布式通信功能的完整技术指南&#xff0c;涵盖核心流程与关键代码实现&#xff1a; 一、开发前置配置 权限声明‌ 在module.json5中添加分布式权限&#xff1a; {"module": {"requestPermissions": [{"name": &quo…

Linux --静态库和动态库的制作和原理

本章重点&#xff1a; 动静态库的制作&#xff0c;使用和查找 可执行程序ELF格式 可执行程序的加载过程 虚拟地址空间和动态库加载的过程 动静态库的制作&#xff0c;使用和查找 1.在了解库的制作之前&#xff0c;我们首先需要知道什么是库。库是写好的现有的&#xff0c;成…

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | IncrementingCounter(递增计数器)

&#x1f4c5; 我们继续 50 个小项目挑战&#xff01;—— IncrementingCounter组件 仓库地址&#xff1a;https://github.com/SunACong/50-vue-projects 项目预览地址&#xff1a;https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API 和 <script setup&g…

简约求职简历竞聘工作求职PPT模版共享

简历竞聘&#xff0c;自我介绍&#xff0c;个人简历&#xff0c;工作求职PPT模版&#xff0c;岗位竞聘求职简历PPT模版&#xff0c;低调绿自我介绍PPT模版&#xff0c;简约求职简历PPT模版&#xff0c;个人介绍PPT模版&#xff0c;我的简历PPT模版&#xff0c;个人求职简介PPT模…

Java大厂面试攻略:Spring Boot与微服务架构深度剖析

问题一&#xff1a;Spring Boot 的自动配置原理是什么&#xff1f; 简洁面试回答&#xff1a; Spring Boot 的自动配置基于条件化配置&#xff0c;通过 Conditional 注解实现&#xff0c;根据项目中依赖和环境自动装配 Bean。 详细解析&#xff1a; Spring Boot 自动配置的核…