fix(VDataTableVirtual): show index from virtualized items

[J-Sek]

Description

fixes #19108

Markup:

<template>
  <v-app theme="dark">
    <v-container class="d-flex ga-3">
      <v-data-table-virtual
        :headers="headers"
        :items="items"
        height="400"
        item-key="id"
        fixed-header
      >
        <template #item="{ columns, internalItem, itemRef, index }">
          <tr :ref="itemRef">
            <td v-for="column in columns" :key="column.key">
              <template v-if="column.key === 'index'"> {{ index }} </template>
              <template v-else> {{ internalItem.raw[column.key] }} </template>
            </td>
          </tr>
        </template>
      </v-data-table-virtual>

      <v-data-table-virtual
        :headers="headers"
        :items="items"
        height="400"
        item-key="id"
        fixed-header
      >
        <template #item.index="{ index }">#{{ index }}</template>
      </v-data-table-virtual>
    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, ref } from 'vue'

  const selectedSize = ref(300)

  const headers = [
    { title: 'Row index', value: 'index', sortable: true },
    { title: 'ID', value: 'id', sortable: true },
    { title: 'Title', value: 'title', sortable: true },
    { title: 'Name', value: 'name', sortable: true },
    { title: 'Role', value: 'role', sortable: true },
  ]

  const baseItems = [
    { title: 'Mr.', name: 'James Smith', role: 'Owner' },
    { title: 'Ms.', name: 'Mary Johnson', role: 'Manager' },
    { title: 'Dr.', name: 'Robert Williams', role: 'Board Member' },
    { title: 'Mrs.', name: 'Patricia Brown', role: 'Developer' },
    { title: 'Mr.', name: 'John Davis', role: 'Designer' },
    { title: 'Ms.', name: 'Jennifer Garcia', role: 'Manager' },
    { title: 'Mr.', name: 'Michael Miller', role: 'Owner' },
    { title: 'Mrs.', name: 'Linda Martinez', role: 'Developer' },
    { title: 'Dr.', name: 'William Rodriguez', role: 'Board Member' },
    { title: 'Ms.', name: 'Elizabeth Hernandez', role: 'Designer' },
    { title: 'Mr.', name: 'David Lopez', role: 'Manager' },
    { title: 'Mrs.', name: 'Barbara Gonzalez', role: 'Owner' },
  ]

  const items = computed(() => {
    return Array.from({ length: selectedSize.value }).map((_, i) => {
      const base = baseItems[i % baseItems.length]
      return { id: i + 1, ...base }
    })
  })
</script>