web-dev-qa-db-fra.com

styliser des lignes individuelles dans une table de données Vuetify

Puis-je appliquer un style différent pour une ligne spécifique dans un tableau de données?

Voici mon code:

<v-data-table
          :headers="headers"
          :items="items"
          v-model="selected"
          :search="search"
          :no-data-text="mensagem"
          select-all
          :rows-per-page-text="linhasPorPagina">
          <template slot="items" slot-scope="props">
            <td>
              <v-checkbox
                primary
                hide-details
                v-model="props.selected"
              ></v-checkbox>
            </td>
            <td class="text-xs-left">{{ props.item.id }}</td>
            <td class="text-xs-left">{{ props.item.apresentante }}</td>    
        </v-data-table>

Par exemple, je souhaite appliquer une ligne rouge lorsque le Id > 4

vue.jsvuetify.js
6
Fabio Ebner

Vous pouvez réellement envelopper vos éléments <td> Dans un élément <tr>. Ensuite, vous pouvez utiliser Vue style binding pour déterminer si vous voulez que les classes soient appliquées ou non.

<template>
  <tr v-bind:class="{'active-class-name': isActive(item)}">
    <td>Woo</td>
  </tr>
</template>

Il affiche le bloc tbody avec une row (tr) avec les noms de classe appliqués et les colonnes enfants contenues dans.

5
mellisdesigns

J'essayais également de styliser des lignes dans un tableau de données vuetify mais les réponses ci-dessus n'avaient pas tout ce dont j'avais besoin pour le faire fonctionner. en utilisant Vuetify v2

Je voulais ajouter une classe à une ligne lorsqu'une certaine condition était remplie.

<v-data-table  
   :headers="myHeaders"
   :items="myItems"
>
  <template v-slot:item="props">
    <tr :class="{'my-class': props.item.current > props.item.total}">
      <td>{{props.item.current}}</td>
      <td>{{props.item.total}}</td>
    </tr>
  </template>
</v-data-table>

...
// js portion of the component (computed prop)

myItems() {
    return [
      {
        current: 101,
        total: 100
      },
      {
        current: 45,
        total: 100
      }
    ]
  }
1
Ju66ernaut

voici un codepen qui produit un résultat similaire à ce que vous recherchez. Il utilise la syntaxe de liaison de style référencée par le commentaire de Daniel ci-dessus.

https://codepen.io/lshapz/pen/jxmgyx

Si vous voulez que la ligne entière ait une ligne rouge (ou dans mon exemple un fond rouge), vous devrez envelopper les trois td dans un tr. Si vous le voulez juste sur la cellule id, vous pouvez ajouter

<td class="text-xs-left" :style="{backgroundColor: (props.item.id > 4 ? 'red' : 'transparent' ) }">
 {{ props.item.id }}
</td>
1
LShapz