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

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"] 时突出显示它。

原文由 Ricardo F. 发布，翻译遵循 CC BY-SA 4.0 许可协议

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-1 和 style-2 定义类：

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

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

编辑 如果 :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' : ''
  }
}

原文由 Ohgodwhy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Soth 发布，翻译遵循 CC BY-SA 4.0 许可协议