ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

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

2026/8/24 8:25:17 拓冰建站 浏览量
vue3+ts 可视化大屏无限滚动table效果实现

注意: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>

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