如何为 vuetify 表格行添加颜色

问题描述

这是我的 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',control: '',]

我想为表格行添加颜色，一行接一行。我该怎么做？

解决方法

我为您提供了这个解决方案。 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',control: '',class: 'yellow darken-2'
          },}
  },})