如何增加 v-data-table 标题中的字体大小答案

【问题标题】：How do I increase the font-size in the header of v-data-table如何增加 v-data-table 标题中的字体大小
【发布时间】：2019-08-20 09:59:27
【问题描述】：

我想在 Vuetify 表 v-data-table 中将 <th> 的字体大小增加到 20px。但它保持在 12 像素。

我试过这个：

table.v-table thead tr th {
  font-size: 20px!important;
}

这是我的数据表：

<v-data-table
        :headers="headers"
        :items="myjson"
        class="elevation-1"
      >
        <template v-slot:items="props">
         <td>{{ props.item.ApplicationType }}</td>
        </template>
</v-data-table>

我希望该广告的字体大小为 20 像素。但是在检查时它仍然保持在 12px。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我遇到了同样的问题。以下是我的解决方法：

table.v-table thead th {
      font-size: 20px !important;

 }

如果您想更改 <td> 使用：

table.v-table tbody td {
    font-size: 18px !important;
}

确保全局添加。即在 App.vue 中。

希望对你有帮助:)

【讨论】：

【解决方案2】：

新的更新应该是现在

.v-data-table > .v-data-table__wrapper > table > tbody > tr > th,
.v-data-table > .v-data-table__wrapper > table > thead > tr > th,
.v-data-table > .v-data-table__wrapper > table > tfoot > tr > th {
   font-size: 20px !important;
}

【讨论】：

【解决方案3】：

在 Vuetify 中，我使用 lang = "scss" 解决了

.v-data-table::v-deep th {
  font-size: 14px !important;
}
.v-data-table::v-deep td {
  font-size: 12px !important;
}

【讨论】：

【解决方案4】：

如果你使用 vuetify 你可以托盘

    .v-data-table ::v-deep th
        font-size: 16px !important
    .v-data-table ::v-deep td
        font-size: 16px !important

【讨论】：

【解决方案5】：

在当前版本中，实际上您可以为此设置一个 Sass 变量：

$data-table-regular-header-font-size: map-deep-get($headings, 'caption', 'size') !default;

https://vuetifyjs.com/en/api/v-data-table/#sass-data-table-regular-header-font-size

【讨论】：

【解决方案6】：

.v-data-table > .v-data-table__wrapper > table > tbody > tr > th, .v-data-table > .v-data-table__wrapper > table > thead > tr > th, .v-data-table > .v-data-table__wrapper > table > tfoot > tr > th 

{
    
    font-size: 0.75rem;
    
    height: 48px;

}

更改 rem 大小。

【讨论】：

【解决方案7】：

这里介绍的解决方案都不适合我。这是我的数据表：

<v-data-table
       :headers="headers"
       :items="items"
       :items-per-page="5"
       class="elevation-0 table"
       :footer-props="{ 'items-per-page-text': 'Items por página' }"
       :search="search"
     >

对我有用的是：

页眉的字体

.table >>> th {
  font-size: 1.8rem !important; 
}

表格中的其他字体

.table >>> tr>td{
  font-size:1.4rem !important;
}

.table >>> .v-data-footer__select,
.table >>> .v-select__selection,
.table >>> .v-data-footer__pagination{
  font-size:1rem;
}

【讨论】：