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

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

npm

javascript 复制代码
npm install vue3-seamless-scroll --save

页面引入

TS

javascript 复制代码
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

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

javascript 复制代码
<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>

效果演示

相关推荐
面向星辰19 小时前
html各种常用标签
前端·javascript·html
梦65019 小时前
HTML新属性
前端
东风西巷21 小时前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
森之鸟21 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell1 天前
GSAP 入门指南
前端·javascript·动效
gnip1 天前
组件循环引用依赖问题处理
前端·javascript
Aotman_1 天前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_6141 天前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf1 天前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育1 天前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育