Vuetify:只设置v-data表的最后一行的样式

Question

是否有方法将不同的样式仅应用于v-data-table的最后一行？

更具体地说，我所说的样式是指更改边框和背景颜色。

<v-data-table
disable-sort
:headers="headers"
:items="data"
:item-key="id"
>
<template v-slot:item="row">
<tr :key="row.item.id">
<td class="text-xs-right">{{ row.item.field1 }} </td>
<td class="text-xs-right">{{ row.item.field2 }} </td>
</tr>
</v-data-table>

Answer 1

您可以将类与以下条件下的样式绑定：

<v-data-table
disable-sort
:headers="headers"
:items="data"
:item-key="id"
>
<template v-slot:item="row">
<tr 
:key="row.item.id" 
:class="{'lastRow': data.length>0 && row.item.id==data[data.length-1].item.id}"
>
<td class="text-xs-right">{{ row.item.field1 }} </td>
<td class="text-xs-right">{{ row.item.field2 }} </td>
</tr>
</v-data-table>

.lastRow { background-color:'grey'; border: 1px solid black; }

在一些vuetify主题中，是透明的，因此可能有必要使用覆盖它

.lastRow {background-color:rgba(105,105,105,0.3); border: 1px solid black; }