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
英文地址,請注明出處:http://en.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 自動配置的核…