Vue新手求助：Vuetify v-data-table自定义CSS无效问题

我是Vue新手，尝试为Vuetify的v-data-table修改表头和单元格行的CSS，但查阅官方文档和搜索到的多种方案都没生效，添加CSS类和自定义表头模板后也没有效果。以下是我的代码及尝试过的CSS：

我的代码 #

HTML模板 #

<v-data-table
  :headers="headers"
  :search="search"
  :items="PendingApprovals"
  multi-sort
  v-model="selected"
  show-select
  item-key="id"
  show-expand
  hide-default-footer="true"
  disable-pagination="true"
  class="elevation-1 mytable">

  <template v-slot:[`item.DateSubmitted`]="{ item }">
    {{ FormatDate(item.raw.DateSubmitted) }}
  </template>
  <template v-slot:[`item.Download`]="{ item }">
    <a :href="DownloadUrl + item.raw.id">
      <v-icon size="small" class="me-2">
        mdi-download
      </v-icon>
    </a>
  </template>
  <template v-slot:[`item.Edit`]="{ item }">
    <a :href="'/form/' + item.raw.id">
      <v-icon size="small" class="me-2">
        mdi-pencil
      </v-icon>
    </a>
  </template>

</v-data-table>

JavaScript部分 #

export default {
  components: {
    VDataTable, 
  },
  data () {
    return {
      dialog: false,
      DownloadUrl: process.env.VUE_APP_API_BASE_URL + "JournalEx/Example/",
      PendingApprovals: [],
      selected: [],
      ApproveDenyValues: [],
      search: '',

      rules: {
        required: (value) => !!value || "Denial Reason is a required field"
      },

      snackbar: false,
      snackbartext: '',
      timeout: 3000,

      headers: [
        {
          key: 'JournalTest',
          title: 'ID',
          align: 'start',
        },
        { title: 'IPS CASE', key: 'CaseCode', width: '20%' },
        { title: 'REQUEST REASON', key: 'Reason', width: '30%'},
        { title: 'REQUESTED BY', key: 'RequestedBy', width: '15%'},
        { title: 'DATE SUBMITTED', key: 'DateSubmitted'},
        { title: 'DOWNLOAD', key: 'Download', sortable: false},
        { title: 'EDIT', key: 'Edit', sortable: false },
      ], 
    }
  }
}

尝试过的CSS #

<style scoped>
.v-data-table >>> .v-data-table-header {
  background-color: red !important;
}

::v-deep .v-data-table-header {
  background-color: #DCDCDC;
}
</style>

解决方法 #

1. 核对Vuetify版本的类名 #

不同版本的Vuetify，v-data-table的DOM类名有差异：

• Vuetify 2.x 表头类是 .v-data-table-header
• Vuetify 3.x 表头类是 .v-data-table__header

先通过浏览器开发者工具查看表头元素的实际类名，确保选择器匹配。

2. 正确使用深度选择器并提高优先级 #

结合你给表格加的自定义类.mytable，用深度选择器限定范围，避免全局样式冲突，同时提高选择器优先级：

Vue 2 写法

<style scoped>
/* 修改表头背景 */
::v-deep .mytable .v-data-table-header {
  background-color: #DCDCDC;
}

/* 修改单元格行样式，比如奇数行背景、hover效果 */
::v-deep .mytable .v-data-table__row {
  &:nth-child(odd) {
    background-color: #f5f5f5;
  }
  &:hover {
    background-color: #e0e0e0;
  }
}
</style>

Vue 3 写法

Vue 3推荐用:deep()替代::v-deep：

<style scoped>
:deep(.mytable .v-data-table__header) {
  background-color: #DCDCDC;
}

:deep(.mytable .v-data-table__row) {
  &:nth-child(odd) {
    background-color: #f5f5f5;
  }
  &:hover {
    background-color: #e0e0e0;
  }
}
</style>

3. 自定义表头插槽（更灵活的控制） #

如果深度选择器还是不生效，可以通过header插槽自定义表头单元格，直接给元素添加类：

<v-data-table ...>
  <!-- 自定义CASE CODE表头 -->
  <template v-slot:header.CaseCode="{ header }">
    <th class="custom-header">{{ header.title }}</th>
  </template>
  <!-- 其他插槽内容不变 -->
</v-data-table>

然后在CSS中直接写：

<style scoped>
.custom-header {
  background-color: #DCDCDC !important;
  color: #333;
  font-weight: bold;
}
</style>

4. 检查样式覆盖 #

打开浏览器F12开发者工具，找到表头或单元格元素，查看Styles面板，看是否有其他更高优先级的样式（比如Vuetify内置样式、其他组件样式）覆盖了你的设置。如果有，可以调整选择器的优先级，或者在必要时合理使用!important（尽量优先用优先级更高的选择器）。

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