Как заставить элемент-класс работать в v-data-table (чтобы я мог раскрасить строку)?

Question

• Я пытаюсь раскрасить строку в таблице v-данных на основе значения одного из полей в таблице.
• Я пробовал все решения, предлагаемые здесь и в других местах, и пробовал еще несколько.
• Я использую текущую версию 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-данных (т.е. 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" }
      } 

Хорошо, это работает, но к первой строке таблицы никогда не применялся класс! Сортировка таблицы таким образом, чтобы наверху была другая запись, ничего не меняет, так что это не имеет ничего общего с данными. Метод вызывается для каждой строки таблицы.

Answer 1

Попробуйте это (это единственное, что у меня сработало, но оно нарушает некоторые базовые функции таблиц):

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

Answer 2

У меня была такая же проблема! Вот что у меня работает с not-working :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" бы!

Answer 3

:item-class должен делать то, что вам нужно. Вы можете использовать :item-class, чтобы указать функцию JavaScript, которая будет возвращать имя применяемого класса.

Я прикрепил ссылку jsfiddle с простым рабочим образцом, используя :item-class.

https://jsfiddle.net/kug6xeLo/15/

В качестве альтернативы вы можете использовать класс элементов, чтобы указать свойство данных, которые поддерживают эту конкретную строку. Данные в данной строке для указанного свойства будут указывать имя класса CSS.

В ходе тестирования я обнаружил, что это не сработает, если указанный класс css находится в стиле с ограниченной областью действия.

<style scoped>Не работал в моем тестировании.

<style>Работал в моем тестировании.

Разметка:

      <v-data-table
          :headers="headers"
            :items="contacts"
          :item-class="isHighlighted"
></v-data-table>

Скрипт:

       methods: {
    isHighlighted(item) {
      return item.firstName === "Joe" ? "selectedColor" : "";
    }
  },

CSS

      
.selectedColor {
  background-color: blue;
}