vuetify3 v-data-tableのtrにclassをつけたい

1.問題

v-data-tableで展開されるtrのtdにある特定の値「user.status」が「0」の時は、trのClassにyellowのclassを付けて行をハイライトさせたい。

2.解決

v-data-tableに:row-propsをつけて、Classを設定するメソッドを設定したら、特定の行がハイライトするように動きました。以下がコードです。

v-data-table(:headers="headers" :items="filteredItems" :row-props="addTrClass")
...略

data() {
  return {
    headers: [
      {title: 'ステータス', align: 'center', key: 'user.status', width: '100%'},
    ],
  }
}
...略

methods: {
  addTrClass({ item }) {
    return {class: item.user.status === 0 ? 'yellow' : ''}
  }
}

3.その他

ネットの記事を見ていると、v-slotをオーバライドして…といった記事がありましたが、オーバライドしてしまうと、trやtdに自動でつくべきclassが付きません。また、headersに入れてる値も自動で展開できなくなりました。

あと、vuetify2だと「item-class」というもう少し直感的な名前なんですが、vuetify3から「row-props」に代わっていました。

4.参考文章

公式
https://vuetifyjs.com/ja/api/v-data-table-rows/

githubのissues
https://github.com/vuetifyjs/vuetify/issues/16991#issuecomment-2488965788

5.最後に

いいね👍もらえると励みになります！