Vuetify v-data-tableでslotを利用せずにitem内容で行の色を変えたりしたい。

v-data-tableのslotを使えば、trタグなどいろいろ手を加えられるらしいけど、それを使わずに何とかしたい。

解決方法

:item-classでtrタグにclass名を追加できる。

感想

v-data-tableの公式ドキュメントにitem-classって書いて無くないですか？ググってもよくわからない。

Data tables Component — Vuetify.js

自分は仕事の都合で、触ったことないNuxtを触ることになったのですが、 最終的にチームリーダーが以下を見つけてきてくれて解決しました。 （チーム全体がNuxt未経験者なので、全員苦労しています。）

javascript - Vuetify data table :item-class doesn't do anything - Stack Overflow

環境

• nuxt@2.16.3
• vuetify@2.6.15

詳細

<template>
  <div id="app">
    <h1 class="title">ToDoリスト</h1>
    <v-data-table
      :headers="headers"
      :items="items"
      :item-per-page="5"
      :item-class="isDone"
      class="elevation-3"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        {
          text: 'Task',
          value: 'task',
        },
        {
          text: 'Status',
          value: 'status',
        },
      ],
      items: [
        {
          task: '掃除',
          status: '未着手',
        },
        {
          task: '洗濯',
          status: '実施中',
        },
        {
          task: '買い物',
          status: '実施済み',
        },
      ],
    }
  },
  methods: {
    isDone(item) {
      if (item.status === '実施済み') {
        return 'status-done'
      }
    },
  },
}
</script>

<style>
.status-done {
  background: grey;
}
</style>

こうすると、status:実施済みのデータ行の時、 となり、スタイルが適応されて行がグレーとなる