如何让 item-class 在 v-data-table 中工作（这样我就可以为一行着色）？答案

【问题标题】：How to get item-class to work in v-data-table (so I can color a row)?如何让 item-class 在 v-data-table 中工作（这样我就可以为一行着色）？
【发布时间】：2020-12-09 11:33:27
【问题描述】：

我正在尝试根据表中某个字段的值为 v-data-table 中的一行着色。
我已经尝试了这里和其他地方提供的所有解决方案，并尝试了更多。
我正在运行当前版本的 Vuetify (2.3.9)
我已经重新加载了所有内容，清除了浏览器缓存和 cookie 等。
我尝试过使用和不使用插槽。
我的应用程序包含在 v-app 中

== 没有插槽 ==

      <v-data-table 
        :items-per-page="50" 
        :headers="headers" 
        :items="jobs" 
        :height="600" 
        :search="search" 
        :hide-default-footer="true" 
        :item-key="jobs.JobID" 
        :item-class="row_class" 
        mobile-breakpoint="300"  
        no-data-text="No jobs today!" 
        dense 
        > 
      </v-data-table>  

methods: {
    row_class (item) { return "jobGreen" }
         } 

.jobGreen {  
   background-color: lightgreen;
          }

结果：

该类未应用。
使用 item-class="jobGreen"（即非响应式）也会失败
将 jobGreen 类应用于 v-data-table（即 class='jobGreen'）按预期工作

== 使用插槽 ==

（简体）

<v-data-table>
   <template v-slot:item="{item}">
      <tr :class="row_class(item)">
         <td>
            {{ item.JobNumber }}
         </td>
      </tr>
   </template>
</v-data-table>

methods: {
    row_class (item) { return "jobGreen" }
      }

好的，这可行但是表格的第一行从来没有应用过一个类！对表格进行排序以使不同的记录位于顶部不会改变任何事情，因此与数据无关。方法正在为表的每一行调用。

【问题讨论】：

stackoverflow.com/questions/62969944/… 这对我很有用

标签： css vuetify.js v-data-table

【解决方案1】：

我也遇到了同样的问题！这对我来说是解决不工作的 :item-class 的方法：（我只想格式化一个 defRow）

<template>
<v-data-table
  :headers="headersForTable"
  :items="chosenTableData"
>
<template v-slot:item="{item}">
  <tr :class="isDefRow(item) ? 'defRow' : ''" @click="rowInTableClicked(item) >
    <td v-for="(head,i) in headersForTable" :key="i">
      {{ item[head.value] }}
    </td>
  </tr>
</template>
</v-data-table>
</template>


<script lang="ts">

  isDefRow(row: any): boolean {
    // ...
  }

  get headersForTable() {
    // returns the array of header objects
  }

  get chosenTableData() {
    // returns the data array
  }

</script>

<style scoped>
.defRow {
  font-weight: bold;
}
</style>

并不是说@click="rowInTableClicked(item) 现在的行为与 @click:row="rowInTableClicked" 的行为相同！

【讨论】：

【解决方案2】：

试试这个（这是唯一对我有用的东西，但它破坏了一些表格的基本功能）：

<template v-slot:body="{ items }">
  <tbody>
    <tr :class="row_class(item)" v-for="item in items" :key="item.<name>">
      <td class="text-start">{{ item.<name> }}</td>
    </tr>
  </tbody>
</template>

【讨论】：