Vuetify数据表如何使用主题颜色设置全选列的背景颜色？

Question

我正在使用 Vuetify for Vue 2 创建一个数据表，并且正在使用主题。我可以通过在 headers 数组中设置一个类来更改标题列的背景颜色。但是，特殊的“全选”列不起作用。知道我需要在这里做什么吗？我尝试使用插槽来覆盖复选框，但它复制了“th”元素。我需要覆盖整个标题行吗？

模板：

<v-data-table
  dense
  :headers="headers" 
  :items="jobs" 
  item-key="name" 
  loading-text="Loading..." 
  class="elevation-1"
  show-select
>
  <template v-slot:header.data-table-select="{props,on}">
    <v-simple-checkbox v-bind="props" v-on="on"></v-simple-checkbox>
  </template>
  <template v-slot:item.data-table-select="{isSelected,select}">
    <v-simple-checkbox :value="isSelected" @input="select($event)"></v-simple-checkbox>
  </template>
</v-data-table>

脚本：

data() {
    return {
      selected: [],
      headers: [
        { type: 'checkbox', sortable: false, class: "primary" },
        { text: 'Name', value: 'name', class: "primary white--text" },
        { text: 'Description', value: 'description', class: "primary white--text" },
        { text: 'Next Fire', value: 'nextFire', class: "primary white--text" },
        { text: 'Last Fire', value: 'lastFire', class: "primary white--text" },
        { text: 'Last Duration', value: 'lastDuration', class: "primary white--text" },
        { text: 'Class', value: 'class', class: "primary white--text" },
      ],
      ...

Answer 1

我刚才也有这个问题。尝试了从网上找到的解决方案，但这对我有用。

在您的 app.scss 中，放置您的自定义 CSS，它应该可以工作。但是，此解决方案会影响所有 v-data-table，因为这适用于您的整个应用程序。

至于你关心使用 vuetify 主题中的"primary"，可以使用var(--v-primary-base)。你可以在 Style 上进行 inspect element 看到它，只需向下滚动到底部即可。

/* app.scss */
/* had to define the selector properly so it would work */
.theme--light.v-data-table > .v-data-table__wrapper > table > thead > tr > th {
    background: var(--v-primary-lighten1);
}
.theme--dark.v-data-table > .v-data-table__wrapper > table > thead > tr > th {
    background: var(--v-primary-lighten1);
}

Answer 2

这不是任何一种完整的解决方案，但可能值得研究 CSS 选择器，特别是 first-of-type。麻烦的是，我不确定如何在该选择器块中应用其他类。

举个例子，

.elevation-1 tr th:first-of-type, td:first-of-type {
  background-color: blue;
}