如何为 vuetify 表格行添加颜色答案

【问题标题】：How to add colors to vuetify table row如何为 vuetify 表格行添加颜色
【发布时间】：2021-01-13 05:36:15
【问题描述】：

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

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

【问题讨论】：

标签： colors row vuetify.js tablerow v-data-table

【解决方案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'
          },
      ],
    }
  },
})

【讨论】：

当我们删除一些项目时，没有得到一行又一行的颜色。因为项目删除了他们的索引。我想用项目索引添加颜色
您最好的选择是在列表中添加一个类属性。然后你把适合你的课程。我已经修改了我的代码来说明这一点。