Question

我要做的就是为给定的行包含等于lowestEntry的条目，更改背景色。

<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>

我想将tr背景颜色更改为绿色。在ìtem.id_entry == lowestEntry["id_entry"]时突出显示它。

Answer 1

基于totalhacks的建议，新的vuetifys项目类别：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    row_classes(item) {
        if (item.calories < 200) {
          return "orange";
        } 
    }
  },
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [{text: 'Dessert', value: 'name'},{ text: 'Calories', value: 'calories' },],
      desserts: [{name: 'Frozen Yogurt',calories: 159,},{name: 'Ice cream sandwich',calories: 237,},{name: 'Eclair',calories: 262,},{name: 'Cupcake',calories: 305,},],
    }
  },
})

.orange {
  background-color: orange;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>

<div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      :item-class= "row_classes"                  
    >
    </v-data-table>
  </v-app>
</div>

Answer 2

使用class绑定：

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

或创建一个方法，以便在需要时不必使用内联模板语法：

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

并将其绑定到class

:class="customRowClass(item, lowestEntry)"

Answer 3

您可以在课堂上使用v-bind:并创建一种方法来更改tr的背景色。

请在工作代码段下方

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/vuetify@1.4.0/dist/vuetify.min.css">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/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>

Answer 4

现在似乎有一种内置的方法可以通过item-class的{{1}}属性来执行此操作。请参阅this的github问题，该问题比current documentation更好地描述了该功能。

如何在v-data-table上设置特定行的样式？ [验证]

4 个答案: