vue.js - 未应用 Vuetify v-data-table 自定义 header 类样式

Question

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

<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 开发工具也不显示任何名为 my-header-style 的类在styles下( Chrome )或 Filter Styles该元素的 (Firefox) 部分，但是当我在开发工具中搜索我的类名时，它确实出现了:

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

我也试过删除 scoped来自 <script>元素，但结果是一样的。 我正在 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>