colors - 如何为 vuetify 表格行添加颜色

Question

这是我的 vuetify 表。

- - - - -模板 - - - - - -

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

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

- - - 脚本 - - - - - - -

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: '',
          },
     ]

我想逐行添加颜色到表格行。我该怎么做？

Answer 1

我给你这个解决方案。https://codepen.io/lino96/pen/yLaRGmX?editors=101

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

代码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'
          },
      ],
    }
  },
})