web-dev-qa-db-fra.com

Vuetify v-data-table

Entre chaque ligne non dernière de la table v-data, une ligne est imprimée par défaut. Je voudrais modifier le css pour changer cette ligne, par exemple. retirez-le. À l’origine, dans la console du développeur, les fichiers css de la bordure inférieure ressemblent à ce qui suit.

.theme--light.v-table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

J'ai assigné à la table de données une classe supplémentaire "mytable": 

<v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1 mytable">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
</v-data-table>

Et avec css j'essaie de modifier le tableau

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none;
}

Bien que la couleur d'arrière-plan ait été changée en jaune clair, la bordure inférieure est toujours imprimée. Dans la console du développeur, la directive permettant de supprimer la bordure inférieure est effacée. La couleur de fond n'est pas. Quel sélecteur dois-je utiliser pour changer aussi le bas de la bordure? Utiliser le même css que celui utilisé par le thème ne marche pas non plus.

cssvuetify.js
3
Kavau

Quel sélecteur dois-je utiliser pour changer le bord inférieur? 

Utilisez votre classe personnalisée et celle utilisée par vuetify

.mytable .v-table tbody tr:not(:last-child) {
    border-bottom: none;
}

De plus, vous pouvez ajouter .theme--light si vous souhaitez styler spécifiquement le thème Lumière.

codepen

En savoir plus sur le style des composants vuetify:

CSS ne fonctionne pas (prend effet) à l'intérieur du composant
Styling Les sélecteurs Vuetify

2
Traxo

J'utilise VueJS 2.x. La méthode de sélection suivante a bien fonctionné pour moi. 

<style lang="scss" scoped>
.table-header /deep/ {
  thead {
    background-color: black;
  }
}
</style>

0
Ravi Anand