Vuetify v-data-table-virtual全选异常：仅选中611项而非643项

问题根源 #

v-data-table-virtual是虚拟滚动组件，核心设计就是只渲染可视区域内（含少量预渲染缓冲区）的列表项，以此优化大数据量下的页面性能。当你点击组件自带的全选按钮时，它只会识别当前已经渲染到DOM中的条目，未被渲染的剩余32条（643-611）不会被加入选中集合，这就是全选不全的原因。

为什么是611这个特定数字？ #

这个数字是由你设置的:height="600"、表格行的默认高度（Vuetify默认行高约52px）以及虚拟滚动的预渲染缓冲区共同决定的。600px的容器高度加上前后预渲染的若干条目，刚好能容纳611个已渲染的行，所以组件只会选中这部分已渲染的条目。

解决办法 #

方案1：自定义全选逻辑（推荐） #

放弃组件自带的全选，手动实现全选/取消全选功能，直接操作数据集合：

<template>
  <div class="mb-3">
    <v-btn @click="selectAll">全选所有权限</v-btn>
    <v-btn @click="clearAll" class="ml-2">取消全选</v-btn>
  </div>
  <v-data-table-virtual
    v-model="selectedScopes"
    :headers="headers"
    :items="allScopes"
    :height="600"
    fixed-header
    show-select
    item-value="scope"
  />
</template>

<script setup>
// ... 原有代码保留
const selectAll = () => {
  selectedScopes.value = allScopes.value.map(item => item.scope);
};

const clearAll = () => {
  selectedScopes.value = [];
};
</script>

方案2：调整虚拟滚动缓冲区（不推荐大数据量） #

如果一定要用组件自带的全选框，可以通过buffer属性强制预渲染所有条目，但这会失去虚拟滚动的性能优势，仅适合数据量不大的场景：

<v-data-table-virtual
  v-model="selectedScopes"
  :headers="headers"
  :items="allScopes"
  :height="600"
  fixed-header
  show-select
  item-value="scope"
  :buffer="643"
/>

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