Comment créer une table rayée dans vuetify v-data-table?

Question

J'ai une table

<v-data-table
  :headers="headers"
  :items="bookings"
  class="elevation-1"
  :search="search"
>
  <template slot="items" slot-scope="props">
    <td>{{ props.item.date }}</td>
    <td>{{ props.item.time }}</td>
    <td>{{ props.item.vehicle }}</td>
  </template>
</v-data-table>

Fabriqué en vuetify, il fonctionne très bien, j'ai juste besoin de faire des rangées alternées dans différentes couleurs. Ou donnez le bootstrap .table-striped classe à la table.

Answer 1

J'ai eu quelques problèmes avec cela si vous avez une table extensible. En effet, en suivant l'exemple de la documentation vuetify, le tableau résultant fera également une ligne pour le contenu en expansion, qui est caché je pense.

Anyhu c'est le style avec lequel je me suis retrouvé:

tr:nth-of-type(4n+3) {
 background-color: rgba(0, 0, 0, .05);
}

Chaque quatrième ligne, avec un décalage de 3, vous n'incluez donc pas l'en-tête.