Vuetify: Есть ли способ изменять состояние строки в v-data-table штатными средствами?

Question

[Mat1lda]

Собственно вопрос: можно ли изменять цвет строки и делать чекбокс неактивным (show-select) штатными средствами, или нужно переопределять всю строку вручную?

Пример: допустим отрисовываю таблицу в которой id и имя, нужно для всех id кратных 3 изменить цвет строки

Answer 1

[0xD34F]

Используйте параметр item-class. Может быть функцией, принимающей объект с данными строки, и возвращающей классы:

<v-data-table
  :item-class="itemClasses"
  ...

methods: {
  itemClasses: item => ({
    red: !(item.id % 3),
  }),
  ...
},

.red {
  background: red;
}

Comments

[Mat1lda]

а способ управлять чекбоксами от show-select есть?

[0xD34F]

Mat1lda, подменить дефолтный чекбокс можно через слот item.data-table-select:

<v-data-table
  ...
>
  <template v-slot:item.data-table-select="{ item }">
    <v-simple-checkbox v-model="item.selected" :disabled="!(item.id % 3)"></v-simple-checkbox>
  </template>
</v-data-table>

[Mat1lda]

0xD34F, благодарствую