fix(VDataTableVirtual): fixed jumping scrollbar

[SebastianStolze]

trigger handleItemResize on expanded row to recalculate height to prevent infinite looping

fixes #21155

Playground.vue

<template>
  <v-app>
    <v-container>      
      <v-data-table-virtual
        :headers="headers"
        :items="versions"
        show-expand
        single-expand
        v-model:expanded="expanded"
        item-value="id"                  
        height="900"
      >     
        <template v-slot:expanded-row="{ item }">
          <td :colspan="headers.length">
            <div v-for="subItem in item.subItems" :key="subItem.id">
              {{ subItem.name }}
            </div>            
          </td>
        </template>
      </v-data-table-virtual>

      <v-row>
      <v-virtual-scroll height="400" :items="items" item-height="24">
        <template #default="{ item, index }">
          <div>{{ index }}</div>
        </template>        
      </v-virtual-scroll>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref, reactive } from "vue";
import { createRange } from "@/util";

const items = createRange(1000)

const generateSubItems = (count) => {
  return Array.from({ length: count }, (_, index) => ({
    id: index + 1,
    name: `Unterversion ${index + 1}`,
    type: `Typ ${String.fromCharCode(65 + (index % 5))}`,
    detailItems: [
      {
        id: index * 2 + 1,
        field: `Feld ${index + 1}`,
        value: `Wert ${index + 1}`,
      },
      {
        id: index * 2 + 2,
        field: `Feld ${index + 2}`,
        value: `Wert ${index + 2}`,
      },
    ],
  }));
};

const versions = ref([
  ...Array.from({ length: 200 }, (_, index) => ({
    id: index + 1,
    name: `Version ${index + 1}`,
    status: "Aktiv",
    date: "2024-03-20",
    subItems: generateSubItems(20),
  })),
]);

const headers = [
  { title: "Name", key: "name" },
  { title: "Status", key: "status" },
  { title: "Datum", key: "date" },
];

const expanded = ref([]);
</script>