如何使item-class在v-data-table中工作以便为行上色?

问题描述

  • 我正在尝试根据表中字段之一的值为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" }
      } 

好的,这行得通,该表的第一行从未应用过任何类! 对表进行排序以使其他记录位于顶部不会更改任何内容,因此与数据无关。 表的每一行都调用方法

解决方法

尝试一下(这是唯一对我有用的方法,但是它破坏了表的某些基本功能):

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

,

我也遇到了同样的问题! 这就是解决不工作的 :item-class 对我来说有效的方法: (我只想格式化一个 defRow

outcome

并不是说 df2 <- data.frame(ID = seq(1,32,by=1),sofa_score = sample(1:8,8,replace = TRUE),resp_score = sample(1:8,outcome = c('deceased','recovered'),days = sample(1:20,coag_score = sample(1:8,replace = TRUE)) 现在的行为与 <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> 的行为相同!