如何在Vuetify的v-table中结合v-virtual-scroll实现虚拟滚动？

基础问题修复：虚拟滚动导致的表格布局错乱 #

你遇到的核心问题是v-virtual-scroll默认渲染为<div>容器，直接放入<tbody>会破坏表格的DOM结构——HTML规范中<tbody>仅允许<tr>作为直接子元素，额外的<div>会导致列对齐、表格结构完全错乱。

修复方案 #

将v-virtual-scroll替代原有的<tbody>，通过tag="tbody"属性让它渲染为合法的<tbody>元素，同时保留独立的<thead>：

<template>
  <v-app>
    <v-main>
      <!-- 给表格设置固定高度，确保滚动区域生效 -->
      <v-table style="height: 500px;">
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
          </tr>
        </thead>
        <!-- 用v-virtual-scroll作为tbody，指定tag属性 -->
        <v-virtual-scroll 
          tag="tbody"
          :height="450" <!-- 预留thead高度，避免滚动区域覆盖表头 -->
          :items="contents"
        >
          <template v-slot:default="{ item }">
            <tr>
              <td>{{ item }}</td>
              <td>{{ item }}</td>
            </tr>
          </template>
        </v-virtual-scroll>
      </v-table>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const contents = ref(Array(1000).fill("cell"));
</script>

进阶：带动态rowspan的虚拟滚动表格处理 #

对于带有计算得出的rowspan的场景，虚拟滚动需要准确计算每一行（或每一组行）的高度，否则会出现滚动位置偏移、内容跳动的问题。

实现步骤 #

1. 提前在数据中存储每组行的rowspan信息（或直接存储该组包含的子行数）
2. 使用get-item-size prop动态计算每个列表项的总高度
3. 在插槽中渲染带rowspan的主行和同组的其他子行

示例代码：

<template>
  <v-app>
    <v-main>
      <v-table style="height: 600px;">
        <thead>
          <tr>
            <th>分组名称</th>
            <th>子项名称</th>
            <th>数值</th>
          </tr>
        </thead>
        <v-virtual-scroll 
          tag="tbody"
          :height="550"
          :items="groupedData"
          :get-item-size="calculateRowHeight"
        >
          <template v-slot:default="{ item }">
            <!-- 带rowspan的主行 -->
            <tr>
              <td :rowspan="item.childCount">{{ item.groupName }}</td>
              <td>{{ item.children[0].name }}</td>
              <td>{{ item.children[0].value }}</td>
            </tr>
            <!-- 渲染同组的其他子行（隐藏分组列） -->
            <tr v-for="child in item.children.slice(1)" :key="child.id">
              <td>{{ child.name }}</td>
              <td>{{ child.value }}</td>
            </tr>
          </template>
        </v-virtual-scroll>
      </v-table>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 模拟带分组（动态rowspan）的数据
const groupedData = ref([
  {
    groupName: "产品组A",
    childCount: 3,
    children: [
      { id: 1, name: "产品1", value: 120 },
      { id: 2, name: "产品2", value: 90 },
      { id: 3, name: "产品3", value: 150 }
    ]
  },
  {
    groupName: "产品组B",
    childCount: 2,
    children: [
      { id: 4, name: "产品4", value: 80 },
      { id: 5, name: "产品5", value: 200 }
    ]
  },
  // 更多分组数据...
]);

// 计算每个列表项的总高度：基础行高 * 子项数量
const BASE_ROW_HEIGHT = 48; // Vuetify表格行默认高度
const calculateRowHeight = (index: number) => {
  return groupedData.value[index].childCount * BASE_ROW_HEIGHT;
};
</script>

关键注意事项 #

• 如果rowspan行的高度不是固定倍数（比如包含换行内容），建议提前在数据中预计算并存储高度值，避免动态计算时的性能损耗。
• 调整表格和虚拟滚动的高度时，要预留出表头的空间，防止滚动区域覆盖表头。
• 虚拟滚动的get-item-size函数必须返回准确的高度值，否则会出现滚动定位错误。

内容的提问来源于stack exchange，提问作者baitendbidz