web-dev-qa-db-fra.com

Comment style une ligne spécifique sur la table V-Data? [Vuetify]

Tout ce que j'essaie de faire est que la ligne donnée contienne une entrée égale à lowestEntry, changez la couleur de fond.

<v-col cols="8">
        <v-data-table
          :loading="loadEntryTable"
          loading-text="A procurar dados..."
          :headers="this.entryheaders"
          :items="this.stockentries"
          :items-per-page="10"
        >
        //Have tried using the v-slot.item to achieve it but no success
</v-data-table>
</v-col>

Je veux changer la couleur d'arrière-plan tr do Green. Sorte de mettre en surbrillance quand ìtem.id_entry == lowestEntry["id_entry"].

javascriptvue.jsvuetify.js
6
Ricardo Ferreira

Utilisez un class Reliure:

:class="item.id_entry === lowestEntry['id_entry'] ? 'custom-bg' : ''"

Ou faire une méthode pour que vous n'ayez pas à utiliser la syntaxe de modèle en ligne si vous voulez:

methods: {
  customRowClass (item, lowestEntry) {
    return item.id_entry === lowestEntry['id_entry'] ? 'custom-bg' : ''
  }
}

et lier cela au class

:class="customRowClass(item, lowestEntry)"
1
Ohgodwhy

Vous pouvez utiliser v-bind: Sous la classe et créer une méthode pour modifier la couleur de fond tr.

S'il vous plaît ci-dessous un extrait de code de travail

new Vue({
  el: '#app',
  //vuetify: new Vuetify(),
  methods: {
    getClass(calories) {
      //Here you can put your condition based on your logic...
      if (calories == 237) return 'orange';
      else if (calories == 305) return 'green';
    },
  },
  data() {
    return {
      headers: JSON.parse('[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]'),
      desserts: JSON.parse('[{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%"},{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%"},{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%"},{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},{"name":"Jelly bean","calories":375,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":392,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"},{"name":"Honeycomb","calories":408,"fat":3.2,"carbs":87,"protein":6.5,"iron":"45%"},{"name":"Donut","calories":452,"fat":25,"carbs":51,"protein":4.9,"iron":"22%"},{"name":"KitKat","calories":518,"fat":26,"carbs":65,"protein":7,"iron":"6%"}]')
    }
  }
})
td {
  border-bottom: 1px solid #FFF;
}

.orange {
  background-color: orange;
}

.green {
  background-color: green;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-data-table items-per-page="10" :headers="headers" :items="desserts" >
      <template slot="items" slot-scope="props">
      <tr v-bind:class="getClass(props.item.calories)">
      <td v-for="key in Object.keys(props.item)" :key="key">{{props.item[key]}}</td>
        </tr>
      </template>
    </v-data-table>
  </v-app>
</div>
1
Narendra Jadhav