增加 v-data-table Vuetify

问题描述

我正在尝试增加标题的字体大小，以使其与使用 v-data-table 绘制的表格中的行更加不同。我参考了类似问题 Question 1 和 Question 2 中的解决方案，但这些解决方案似乎不起作用。附加的还有负责使用 Google Developer Tool (Inspect Element) 编辑的标题文本大小的代码。关于在哪里或如何编辑这部分代码的任何建议

代码：

<v-data-table
              :headers="tableFields"
              :items="programs"
              :items-per-page="5"
              class="elevation-1">
                    <template v-slot:[`item._id.$oid`]="{ item }">
                      {{item._id.$oid}}
                    </template>
</v-data-table>

脚本代码：

 data () {
      return {
        tableFields: [
          {text:'ID',value:'_id.$oid'},{text:'Tag',value:'tags'},{text:'score (Product)',value:"scores.product",},{text:'Last Modified Date',value:'DateModified'},{text: 'Actions',value: 'action',sortable: false,align: 'center'},],

解决方法

使用此样式增加标题字体大小：

.v-data-table .v-data-table-header tr th {
  font-size: 24px !important;
}

demo

,

应用专门针对 v-data-table 标头类的样式：

thead.v-data-table-header th[role=columnheader] {
  font-size: 14px !important;
}