如何在Vuetify数据表格中为特定行设置差异化样式？

当然可以！在Vuetify的数据表格里给特定行应用不同样式非常灵活，我结合你的现有代码给你两种实用方案：

方法一：使用item-class属性（简洁便捷） #

Vuetify的v-data-table提供了item-class属性，你可以绑定一个函数，根据每行数据的属性返回对应的类名。

修改后的模板代码 #

<v-data-table
  :headers="headers"
  :items="items"
  v-model="selected"
  :search="search"
  :no-data-text="mensagem"
  select-all
  :rows-per-page-text="linhasPorPagina"
  :item-class="getRowClass" <!-- 新增这一行 -->
>
  <template slot="items" slot-scope="props">
    <td>
      <v-checkbox primary hide-details v-model="props.selected"></v-checkbox>
    </td>
    <td class="text-xs-left">{{ props.item.id }}</td>
    <!-- 你的其他列渲染代码 -->
  </template>
</v-data-table>

对应的JS逻辑 #

在组件的methods里定义判断函数，根据你的业务规则返回类名：

methods: {
  getRowClass(item) {
    // 示例：如果id是偶数，添加灰色背景类；如果状态为"紧急"，添加红色背景类
    if (item.id % 2 === 0) {
      return 'even-row';
    } else if (item.status === 'urgent') {
      return 'urgent-row';
    }
    // 默认返回空字符串，不添加额外样式
    return '';
  }
}

样式定义 #

在样式部分添加对应的类样式（如果是scoped样式，需要用/deep/或::v-deep穿透）：

<style scoped>
/deep/ .even-row {
  background-color: #f5f5f5;
}

/deep/ .urgent-row {
  background-color: #ffebee;
}
</style>

方法二：自定义items插槽（更灵活） #

如果你需要更精细的控制（比如不仅给整行加样式，还要给特定列调整样式），可以直接在自定义的items插槽里给<tr>绑定动态类。

修改后的模板代码 #

<v-data-table
  :headers="headers"
  :items="items"
  v-model="selected"
  :search="search"
  :no-data-text="mensagem"
  select-all
  :rows-per-page-text="linhasPorPagina"
>
  <template slot="items" slot-scope="props">
    <!-- 给<tr>绑定动态类 -->
    <tr :class="getRowClass(props.item)">
      <td>
        <v-checkbox primary hide-details v-model="props.selected"></v-checkbox>
      </td>
      <td class="text-xs-left">{{ props.item.id }}</td>
      <!-- 你的其他列渲染代码 -->
    </tr>
  </template>
</v-data-table>

逻辑和样式 #

JS的getRowClass函数和样式定义和方法一完全一致，这种方式的优势是你可以同时给<td>也绑定动态类，比如：

<td :class="{ 'text-red': props.item.status === 'urgent' }">{{ props.item.status }}</td>

两种方案都能实现你的需求，你可以根据业务复杂度选择：如果只是整行样式，方法一更简洁；如果需要控制行内元素，方法二更灵活。

内容的提问来源于stack exchange，提问作者Fabio Ebner