vue3+ts 可视化大屏无限滚动table效果实现

news2024/11/19 2:53:52

注意:vue3版本需使用 vue3-seamless-scroll
npm

npm install vue3-seamless-scroll --save

页面引入

TS

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

代码使用(相关参数可参考:https://www.npmjs.com/package/vue3-seamless-scroll)

<div class="my-table">
   <div class="table_th">
          <span>设备编号</span>
          <span>设备位置</span>
          <span>设备状态</span>
          <span>设备类型</span>
      </div>
      <vue3-seamless-scroll
          :list="TableData.data"
          direction="up"
          :hover="true"
          :limitScrollNum="1"
          :step="0.2"
          class="seamless-warp2"
          >
          <div class="table_td"
              v-for="item in TableData.data"
              :key="item.num"
          >
              <span>{{item.num}}</span>
              <span>{{item.place}}</span>
              <span :class="item.status == '正常' ? 'green-color':'red-color'">{{item.status}}</span>
              <span>{{item.type}}</span>
          </div>
      </vue3-seamless-scroll>
  </div>

效果演示
在这里插入图片描述

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

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

相关文章

Unity与Android交互通信系列(3)

在上两篇文章中&#xff0c;我们已经能够通过直接使用Java&#xff0c;或者通过AndroidJavaClass、AndroidJavaObject这两个类实现在Unity端和Android原生端的通信。这已经可以解决很多问题&#xff0c;但这种方式不够模块化&#xff0c;不够优雅。 在实际使用中&#xff0c;将…

【宇宙猜想】AR文创入驻今日美术馆、北京天文馆等众多展馆,在AR互动中感受科技魅力!

近日&#xff0c;由「宇宙猜想」推出的AR系列文创产品先后入驻今日美术馆、北京天文馆、国家自然博物馆、上海天文馆、国家海洋馆、中华手工展馆等各大馆场并与其展开相关合作。 「宇宙猜想」致力于创造虚拟空间价值&#xff0c;用AR技术与文创产品碰撞出新的火花&#xff0c;为…

Qt Designer 常见需求

窗口 参考链接 【转载】Qt Designer 使用全攻略_qtdesigner使用-CSDN博客 QT屏幕自适应自动布局&#xff0c;拖动窗口自动变大变小&#xff08;一&#xff09;_qt布局随窗口大小变化-CSDN博客 pyqt5设置高分辨率以及icon显示模糊解决办法_python qt图显示不清晰-CSDN博客 窗…

RHCE9学习指南 第11章 网络配置

11.1 网络基础知识 一台主机需要配置必要的网络信息&#xff0c;才可以连接到互联网。需要的配置网络信息包括IP&#xff0c;子网掩码&#xff0c;网关和DNS。 11.1.1 IP地址 在计算机中对IP的标记使用的是32bit的二进制&#xff0c;例如&#xff0c; 11000000 10101000 00…

Python 爬虫之下载歌曲(二)

获取深夜emo云歌单信息 文章目录 获取深夜emo云歌单信息前言一、基本流程二、代码编写1.基本要素代码2.获取歌名和链接信息3.获取歌曲的作者信息4.将上面三个列表遍历保存 三、效果展示 前言 换个平台&#xff0c;爬歌深夜网抑云平台的歌单的相关信息&#xff0c;关于作者、歌…

Advanced IP Scanner - 网络扫描器

Advanced IP Scanner - 网络扫描器 1. Advanced IP ScannerReferences https://www.advanced-ip-scanner.com/cn/ ​ 可靠且免费的网络扫描器可以分析 LAN。该程序可扫描所有网络设备&#xff0c;使您能够访问共享文件夹和 FTP 服务器&#xff0c;(通过 RDP 和 Radmin) 远程控制…

[Angular] 笔记 9:list/detail 页面以及@Output

1. Output input 好比重力&#xff0c;向下传递数据&#xff0c;list 传给 detail&#xff0c;smart 组件传给 dumb 组件&#xff0c;父组件传给子组件。input 顾名思义&#xff0c;输入数据给组件。 output 与之相反&#xff0c;好比火箭&#xff0c;向上传递数据或事件。ou…

安装kafka

静态文件安装&#xff08;单机&#xff09; 解压到指定目录&#xff08;解压到 /usr&#xff09; tar -zxf kafka_2.11-2.2.0.tgz -C /usr/ 到指定的解压目录下 cd /usr/kafka_2.11-2.2.0/ 配置主机名 查看是否配置了HOSTNAME vim /etc/sysconfig/network 没有就新增 HOSTNA…

当 Redis 遇上 Serverless

亚马逊云科技开发者社区为开发者们提供全球的开发技术资源。这里有技术文档、开发案例、技术专栏、培训视频、活动与竞赛等。帮助中国开发者对接世界最前沿技术&#xff0c;观点&#xff0c;和项目&#xff0c;并将中国优秀开发者或技术推荐给全球云社区。如果你还没有关注/收藏…

【番外】在Windows安装Airsim/UE4踩坑合集

在Windows安装Airsim/UE4踩坑合集 1.安装过程中一定要确保Epic Games Launcher是英文环境&#xff0c;保存路径什么的也尽量是英文。2.UE4中的虚幻引擎一定要安装4.27版本以上的&#xff0c;不然的话最后运行vs的时候会报语法错误&#xff0c;网上根本查不到的那种错误。换了版…

云原生Kubernetes:K8S集群实现容器运行时迁移(docker → containerd) 与 版本升级(v1.23.14 → v1.24.1)

目录 一、理论 1.K8S集群升级 2.环境 3.升级策略 4.master1节点迁移容器运行时(docker → containerd) 5.master2节点迁移容器运行时(docker → containerd) 6.node1节点容器运行时迁移(docker → containerd) 7.升级集群计划&#xff08;v1.23.14 → v1.24.1&#…

阿里云OpenSearch-LLM智能问答故障的一天

上周五使用阿里云开放搜索问答版时&#xff0c;故障了一整天&#xff0c;可能这个服务使用的人比较少&#xff0c;没有什么消息爆出来&#xff0c;特此记录下这几天的阿里云处理过程&#xff0c;不免让人怀疑阿里云整体都外包出去了&#xff0c;反应迟钝&#xff0c;水平业余&a…

sheng的学习笔记-【中】【吴恩达课后测验】Course 4 -卷积神经网络 - 第三周测验

课程4_第3周_测验题 目录 第一题 1.现在你要构建一个能够识别三个对象并定位位置的算法&#xff0c;这些对象分别是&#xff1a;行人&#xff08;c1&#xff09;&#xff0c;汽车&#xff08;c2&#xff09;&#xff0c;摩托车&#xff08;c3&#xff09;。下图中的标签哪个…

Chrome插件精选 — 前端工具

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件挑选出比较好用的一款或几款&#xff0c;尽量满足界面精致、功能齐全、设置选项丰富的使用要求&#xff0c;便于节省一个个去尝试的时间和精力。 1. FeHelper(前端助…

ARCGIS PRO SDK 要素空间关系

一、要素与要素查询&#xff0c;返回的是bool值 1、 Touches 判断几何要素是否接触 Touches 如果 geometry1 与 geometry2 接触&#xff0c;则返回 true&#xff0c;否则 false。 touches GeometryEngine.Instance.Touches(Geometry1, Geometry2) 2、…

KEPServerEX 6 之【外篇-1】PTC-ThingWorx服务端软件安装 Tomcat10本地安装

本文目标: 安装 Java 和 Apache Tomcat ,为ThingWorx安装做基础。 ----------------------------------------------------------------------- 安装重点 --------------------------------------------------------------------- 1. 安装 Java 11 / JDK 11 添加系…

LabVIEW进行激光斑点图像处理与分析

LabVIEW进行激光斑点图像处理与分析 近年来&#xff0c;激光技术的应用日益繁荣。激光光斑的质量评估和分析技术决定了应用效果&#xff0c;对机器视觉、武器装备、光学测量和医疗设备产生深远影响。就具体用途和技术而言&#xff0c;激光光斑的采集和处理至关重要。即插即用的…

【三维目标检测】【自动驾驶】IA-BEV:基于结构先验和自增强学习的实例感知三维目标检测(AAAI 2024)

系列文章目录 论文&#xff1a;Instance-aware Multi-Camera 3D Object Detection with Structural Priors Mining and Self-Boosting Learning 地址&#xff1a;https://arxiv.org/pdf/2312.08004.pdf 来源&#xff1a;复旦大学 英特尔Shanghai Key Lab /美团 文章目录 系列文…

Linux:查询当前进程或线程的资源使用情况

目录 一、/proc/[PID]/下的各个文件1、proc简介2、/proc/[PID]/详解 二、通过Linux API获取当前进程或线程的资源使用情况1、getrusage2、sysinfo3、times 在工作中&#xff0c;我们排除app出现的一些性能/资源问题时&#xff0c;通常要先知道当前app的资源使用情况&#xff0c…

一种改进的平衡生成对抗网络用于视网膜血管分割

A Refined Equilibrium Generative Adversarial Network for Retinal Vessel Segmentation 一种改进的平衡生成对抗网络用于视网膜血管分割背景贡献实验方法Symmetric equilibrium architecture&#xff08;对称均衡架构&#xff09;Multi-scale features refine block&#xf…