如何将 colors 添加到 vuetify 表行

Question

This is my vuetify table.

---------template-----------

  <v-data-table
    :headers="headers"
    :items="desserts"

    :items-per-page="5"
    class="elevation-1"
  >
  </v-data-table>

------script-------------

headers: [
          {
            text: 'Campaign Id',
            align: 'start',
            sortable: false,
            value: 'id',
          },
          { text: 'Created by', value: 'created' },
          { text: 'Controls', value: 'control' },
        ],
desserts: [
          {
            id: '1',
            created:'ABBC',
             control:''
          },
        {
            id: '2',
            created:'ABBC',
             control: '',
          },
     ]

I want to add colors to table row, as row after row. how I do this?

Answer 1

I offer you this solution. https://codepen.io/lino96/pen/yLaRGmX?editors=101

Code HTML

   <div id="app">
      <v-app id="inspire">
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="5"
          class="elevation-1"
          :item-class="(item) => item.class">
        </v-data-table>
      </v-app>
    </div>

Code JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
            text: 'Campaign Id',
            align: 'start',
            sortable: false,
            value: 'id',
        },
        { text: 'Created by', value: 'created' },
        { text: 'Controls', value: 'control' },
      ],
      desserts: [
          {
            id: '1',
            created:'ABBC',
            control:'',
            class: 'purple darken-1 white--text'
          },
          {
            id: '2',
            created:'ABBC',
            control: '',
            class: 'yellow darken-2'
          },
      ],
    }
  },
})