时间戳

首页 > 解决方案 > Vuetify：仅样式化 v-data-table 的最后一行

vue.js - Vuetify：仅样式化 v-data-table 的最后一行

问题描述

有没有办法只对 a 的最后一行应用不同的样式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>

标签： vue.jsvuetify.js

解决方案

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

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

推荐阅读