2
votes

Comment changer la couleur d'arrière-plan des tables de données dans Vuetify?

Je souhaite modifier la couleur d'arrière-plan de ma table de données dans son ensemble. Je ne veux pas utiliser le thème sombre ou le thème clair. Je n'arrive pas à le changer même en utilisant! Important ou en utilisant les classes disponibles.

vuetify.js

0 commentaires

3 Réponses :

2
votes

Ajoutez une classe personnalisée à la balise v-data-table comme ceci:

<style>
  @import './assets/styles/yourstyles.css';
</style>

elevation-1 est leur nom de classe standard. J'ai ajouté test pour illustrer ce point.

Ajoutez le style nécessaire au sélecteur .test .theme - light.v-table dans votre CSS personnalisé.

Par exemple .test .theme - light.v-table {couleur d'arrière-plan: # 00f; }

Vous devrez peut-être remplacer le nom du thème dans le chemin CSS par le nom de votre thème.

Si vous regardez à l'intérieur du DOM, vous remarquerez ce nom de classe Le test a été appliqué à un conteneur

 , pas à l'élément  .      
 Un moyen simple d'inclure votre CSS est d'utiliser la balise  dans votre fichier App.vue: 
<v-data-table ... class="elevation-1 test" ...>

1 commentaires

serait plus agréable de le faire sur l'élément v-data-table lui-même

2
votes

Ajoutez simplement la classe de couleur appropriée, par exemple class = "primary" ou le nom de la couleur du pack de couleurs vuetify.

2 commentaires

Cela ne répond pas à la question. Pour critiquer ou demander des éclaircissements à un auteur, laissez un commentaire sous sa publication. - De l'avis

Dans vuetify, primaire est le nom de la couleur primaire dans le thème, la classe primaire définit l'arrière-plan de l'élément sur la couleur primaire. Ainsi, sur le composant v-data-table, l'ajout de la classe «primaire» ou de l'un des noms de couleur sur le site Web vuetify définira la couleur d'arrière-plan de la table de données sur cette couleur. C'est exactement ce que le PO demande comment faire.

0
votes

Vous pouvez utiliser l'objet headers pour spécifier la classe comme ci-dessous,

headers: [{
    text: 'Dessert (100g serving)',
    align: 'start',
    divider: true,
    sortable: false,
    value: 'name',
    class: "blue lighten-5"
},
{
    text: 'Calories',
    value: 'calories',
    align: 'center',
    divider: true,
    class: "blue lighten-5"
}]

Le code ci-dessus ajoutera un fond bleu clair à votre en-tête. Vous pouvez faire plus avec la classe attr dans l'objet headers

0 commentaires