fix(VDataTable): missing stripes on fixed columns

[J-Sek]

Description

• quick fix for missing stripes on the fixed columns

Note: the changes cut deep and require a bit more consideration for potential consequences. Please share your thoughts.

Markup:

<template>
  <v-app theme="_dark">
    <v-container>
      <v-card max-width="540">
        <v-data-table
          :headers="header"
          :items="items"
          fixed-header
          striped="even"
        >
          <template #item.icon>
            <v-icon icon="mdi-truck" />
          </template>
          <template #item.status>
            <v-icon icon="mdi-cow" />
          </template>
          <template #item.actions>
            <v-btn>action btn</v-btn>
          </template>
        </v-data-table>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup>
  const items = [
    { category: 'G1', key1: 100000, key2: 200000, key3: 300000, key4: 400000, key5: 500000 },
    { category: 'G1', key1: 100000, key2: 200000, key3: 300000, key4: 400000, key5: 500000 },
    { category: 'G1', key1: 100000, key2: 200000, key3: 300000, key4: 400000, key5: 500000 },
    { category: 'G2', key1: 100000, key2: 200000, key3: 300000, key4: 400000, key5: 500000 },
    { category: 'G2', key1: 100000, key2: 200000, key3: 300000, key4: 400000, key5: 500000 },
    { category: 'G2', key1: 100000, key2: 200000, key3: 300000, key4: 400000, key5: 500000 },
    { category: 'G2', key1: 100000, key2: 200000, key3: 300000, key4: 400000, key5: 500000 },
  ]

  const header = [
    { title: 'Category', key: 'category', width: 95, fixed: true, sortable: false },
    { title: '[-]', key: 'icon', width: 60, fixed: true, sortable: false },
    { title: 'col1', key: 'key1', width: 100 },
    { title: 'col2', key: 'key2', width: 100 },
    { title: 'col3', key: 'key3', width: 150 },
    { title: 'col4', key: 'key4', width: 100 },
    { title: 'col5', key: 'key5', width: 100 },
    { title: 'St.', key: 'status', width: 50, fixed: 'end', sortable: false },
    { title: 'Actions', key: 'actions', width: 160, fixed: 'end' },
  ]
</script>