vuetify v-data-table 中整个单元格的背景颜色

Question

我正在尝试在 vuetify v-data-table 中的整个单元格上设置背景颜色，但颜色仅在字母上，而不是所有单元格上。

这就是我得到的

这就是我想要的

这是代码：

类 custRmk 根据 customerRemark 中的值返回背景颜色

条件 CSS 工作正常

Answer 1

Vuetify 2 中的数据表有一个

item-class

属性，您可以使用它根据项目在 tr 上设置类。然后你可以添加CSS来设置行中td元素的背景颜色。

看一下片段：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-data-table
            :headers="headers"
            :items="items"
            :itemClass="getItemClass"
          />
          
          <v-slider
            v-model="selectedId"
            min="0"
            :max="items.length-1"
            label="Selected item id:"
            :tick-labels="items.map(i => i.id)"
          />
        </v-container>
      </v-main>
    </v-app>
  `,
  data(){
    return {
      selectedId: 1,
      headers: [
        {text: 'Name', value: 'name'},
        {text: 'Id', value: 'id'}
      ],
      items: Array.from({length: 5}, (_,i) => ({name: 'Name '+i, id: i}))
    }
  },
  methods: {
    getItemClass(item){
      return item.id === this.selectedId ? 'highlight-name' : null
    }
  },
})

tr.highlight-name > td:nth-child(1){
  background: purple;
  color: white;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>