zuo-table-scroll

Ant Design Vue 终极无缝滚动方案
丝滑如丝 · 真暂停 · 零闪跳 · 内存恒定 · GPU 加速
专为大屏看板、数据可视化、实时排行榜打造

为什么选择 zuo-table-scroll？

| 特性 | zuo-table-scroll | 其他方案 | |---------------------|------------------|---------| | 真正丝滑（GPU 加速） | Yes | No 卡顿 | | 鼠标悬停真暂停 | Yes | No 假暂停 | | 无闪跳、无空白 | Yes | 常见 | | 内存恒定（只复制一次）| Yes | 无限追加 | | 支持动态数据更新 | Yes | 部分支持 | | 一行代码集成 | Yes | 复杂配置 |

安装

npm install zuo-table-scroll
# or
pnpm add zuo-table-scroll
# or
yarn add zuo-table-scroll

<template>
  <a-table
    ref="tableRef"
    :columns="columns"
    :data-source="tableData"
    :pagination="false"
    :scroll="{ y: 600 }"
  />
</template>

<script setup>
import { ref } from 'vue'
import { useSeamlessTableScroll } from 'zuo-table-scroll'

const tableRef = ref()
const tableData = ref([
  { key: 1, name: '张三', score: 99 },
  { key: 2, name: '李四', score: 88 },
  // ...
])

useSeamlessTableScroll(tableRef, tableData, {
  speed: 30,        // 数值越小越快
  pauseOnHover: true
})
</script>

<style scoped>
:deep(.seamless-table-scroll) {
  overflow: hidden !important;
  contain: paint;
}
:deep(.seamless-table-scroll table) {
  transform: translateZ(0);
}
</style>