javascript - 如何设置 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"] 时突出显示它。

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，或者您需要对行进行更多控制，而不仅仅是绑定(bind)一个类，您您必须使用 item 插槽并手动绑定(bind)类/样式/等。

定位 item 插槽并手动将类绑定(bind)到行:

<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' : ''
  }
}