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

Posted 2023-02-23

【中文标题】未应用 Vuetify v-data-table 自定义标头类样式

【英文标题】：Vuetify v-data-table custom header class styling not being applied

【发布时间】：2021-04-17 16:50:42

【问题描述】：

我正在尝试在 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，并且我尝试重新启动开发服务器、刷新页面等，以防它是热重载问题。

【参考方案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>

【讨论】：

这对我有用，谢谢。我经常遇到需要应用 !important 来覆盖 Vuetify 样式的问题，就像您在示例中所做的那样。这正常吗？在这种情况下，我认为这对我来说没问题，但我不想经常使用（我认为通常推荐的东西）。

是的，你是对的。这不是推荐的做法，但到​​目前为止我还没有找到更合适的解决方案。我也经常遇到。

如果你不想用重要的，为什么不坚持 :color="h.color" ？