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

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

如果您使用的是较新版本的 vuetify，您可以访问item-class作为v-data-table. 这将提供item作为回调函数的第一个参数。

<v-data-table
....
:item-class="itemRowBackground"
></v-data-table>

然后定义将返回类名的函数：

methods: {
  itemRowBackground: function (item) {
     return item.protein > 4.2 ? 'style-1' : 'style-2'
  }
}

然后只需为style-1and定义类style-2：

.style-1 {
  background-color: rgb(215,215,44)
}
.style-2 {
  background-color: rgb(114,114,67)
}

这是此示例的代码笔，适用于您的代码笔示例

编辑如果:item-class不适用于您当前版本的 Vuetify，或者您需要对行进行更多控制而不仅仅是绑定一个类，您将必须使用item插槽并手动绑定类/样式/等。

定位item插槽并将类手动绑定到行：

<v-data-table>
    <template #item="{ item }">
      <tr :class="item.id_entry === lowestEntry['id_entry'] ? 'custom-bg' : ''">
        //manually define all of your <td> elements now.
      </tr> 
    </template>
<v-data-table>

或者，您可以传递:class="customRowClass(item, lowestEntry)"和定义customRowClass方法：

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

Answer 2

根据 totalhacks 的建议，新的 vuetify 项目类：

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>