未应用 Vuetify v-data-table 自定义标头类样式

Question

我正在尝试在 Vuetify 中自定义属于 v-data-table 标头的类，但未应用类样式。我的组件如下所示：

<template>
    <v-data-table :headers="headers" :items="myitems"></v-data-table>
    <template v-slot:item.thing="{ item }">
        <span class="some-other-style">{{ item.thing }}</span>
    </template>
</template>

<script>
export default {
  name: 'MyComponent',

  data: () => ({
    headers: [
      { text: 'First Header', value: 'first', class: 'my-header-style' },
      { text: 'Second Header', value: 'thing', class: 'my-header-style' },
      ...
</script>

<style scoped>
.some-other-style {
  background: blue;
}
.my-header-style {
  color: #6f8fb9;
}
</style>

我不愿意说这是 Vuetify（或我的 Vuetify 代码）的问题，因为它实际上是针对正确的 DOM 元素设置类。 Firefox/Chrome 开发工具在元素上显示类名，例如<th class="text-start my-header-style sortable"...，但未应用该类的 CSS 样式。 Firefox/Chrome 开发工具也不会在该元素的 styles (Chrome) 或 Filter Styles (Firefox) 部分下显示任何名为 my-header-style 的类，但是当我在开发工具中搜索我的类名时，它会显示：

.my-header-style[data-v-2c00ba1e] {
  color: #6f8fb9;
} 

我也尝试从<script> 元素中删除scoped，但结果是一样的。 我正在 Ubuntu 18 上的 Chrome 87.0.4280.88 和 Firefox 84.0.2 上进行测试。我正在使用带有 webpack 的 vue-cli，并且我尝试重新启动开发服务器、刷新页面等，以防它是热重载问题。

Answer 1

您可以隐藏默认标题并使用 v-slot 创建自定义：

<template>
    <v-data-table
    :headers="headers"
    :items="myitems"
    hide-default-header
    >

    <template v-slot:header="{ props: { headers } }">
        <thead>
          <tr>
            <th v-for="h in headers" :class="h.class">
              <span>{{h.text}}</span>
            </th>
          </tr>
        </thead>
    </template>
    </v-data-table>
</template>

<script>
export default {
  name: 'MyComponent',

   data () {
        return {
            headers:[
                { text: 'First Header', value: 'first', class: 'my-header-style' },
                { text: 'Second Header', value: 'thing', class: 'my-header-style' },
            ],
            myitems : []
        }
    }
}
</script>

<style scoped>
.some-other-style {
  background: blue;
}
.my-header-style {
  color: #6f8fb9 !important;
}
</style>