You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求推荐适用于Vue表格的虚拟滚动组件(适配Vuetify SimpleTable)

适配Vuetify表格的虚拟滚动方案推荐

1. 复用vue-virtual-scroller改造适配

你之前试过的vue-virtual-scroller完全可以适配表格场景,无需换库。核心思路是让虚拟滚动仅作用于<tbody>区域,保留<thead>的固定渲染:

<v-simple-table>
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <!-- 更多表头列 -->
    </tr>
  </thead>
  <tbody>
    <virtual-scroller
      :items="tableData"
      item-height="48"
      tag="div"
      style="height: 500px; overflow-y: auto;"
    >
      <template v-slot="{ item }">
        <tr>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <!-- 更多数据列 -->
        </tr>
      </template>
    </virtual-scroller>
  </tbody>
</v-simple-table>

注意给virtual-scroller设置固定高度和滚动属性,同时准确指定item-height来保证滚动计算的精度。

2. 切换至Vuetify官方v-data-table

如果可以从SimpleTable切换到Vuetify的v-data-table,它原生支持virtual-scroll属性,开启后直接实现带固定表头的虚拟滚动,无需额外依赖:

<v-data-table
  :items="tableData"
  :headers="tableHeaders"
  virtual-scroll
  height="500"
>
  <!-- 自定义列内容插槽 -->
</v-data-table>

这个方案完全贴合Vuetify生态,表头自动固定,虚拟滚动逻辑由官方封装维护,省心高效。

3. 轻量专用库vue-virtual-table

专门针对表格场景开发的虚拟滚动库,支持表头固定、列宽自适应,直接适配Vue项目。使用时只需传入表头配置和数据,无需手动处理tbody的包裹逻辑,对新手友好。

内容的提问来源于stack exchange,提问作者Dusan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.11 14:45:28