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

Question

我正在尝试自定义属于 Vuetify 中 a 标头的类，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 开发工具在元素eg 上显示类名称<th class="text-start my-header-style sortable"...，但未应用该类的CSS 样式。Firefox/Chrome 开发工具也不会显示在该元素的(Chrome) 或(Firefox) 部分my-header-style下调用的任何类，但是当我在开发工具中搜索我的类名时，它确实会显示：stylesFilter Styles

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

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

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>