如何修改Vuetify表格表头样式（含全选复选框自定义样式）

方案1：手动声明选择列的header配置（适用于Vuetify3） #

Vuetify3支持手动在headers数组中添加选择列的配置项，指定value为data-table-select后，即可和普通表头一样绑定自定义class：

headers = [
    // 手动添加全选列配置
    {
        value: "data-table-select",
        class: "success--text title your-custom-class"
    },
    {
        text: "Metering Point",
        align: "start",
        sortable: true,
        value: "meteringpoint",
        class: "success--text title"
    },
]

方案2：使用插槽自定义全选表头（全版本兼容） #

通过header.data-table-select插槽自定义全选列的表头内容，可以直接给元素绑定自定义class或者写内联样式：

<v-data-table
  :headers="headers"
  :items="items"
  show-select
>
  <!-- 自定义全选表头插槽 -->
  <template v-slot:header.data-table-select="{ props }">
    <div class="custom-select-header">
      <v-checkbox v-bind="props" />
    </div>
  </template>
</v-data-table>

对应样式示例：

.custom-select-header {
  background-color: grey;
}

方案3：深度选择器覆盖默认样式 #

之前样式不生效大概率是因为CSS写在了带scoped属性的style标签中，需要加深度选择器穿透组件样式：

• Vue2 + scoped样式写法：

::v-deep .v-data-table-header th.v-data-table__selection-column {
    background-color: grey;
}

• Vue3 + scoped样式写法：

:deep(.v-data-table-header th.v-data-table__selection-column) {
    background-color: grey;
}

如果优先级不够可以在选择器前加父级自定义类提升优先级，不推荐随意加!important。

内容的提问来源于stack exchange，提问作者Daniel