Vuetify v-data-table 不会增加字体大小 [英] Vuetify v-data-table doesn't increase font size

问题描述

Vuetify v-data-table 不会增加字体大小.

Vuetify v-data-table doesn't increase font size.

我如何修改表格的内容以增加文本的字体大小，因为它太小且难以阅读.

How can I modify the table's content for me to be able to increase the font size of the text because its too small and hard to read.

 <v-data-table
    :headers="headers"
    :items="allCareers"
    :search="search"
    sort-by="calories"
    class="elevation-1 display-2 white--green"
  >
    <template v-slot:item.action="{ item }">
      <v-icon small class="mr-2" @click="editArticle(item.ARTICLE_NUM)">edit</v-icon>
      <v-icon small @click="deleteSingleArticle(item.ARTICLE_NUM)">delete</v-icon>
    </template>
  </v-data-table>

风格

<style scoped>
table.v-table thead tr th {
  font-size: 24px;
}
table.v-table tbody tr td {
  font-size: 24px;
}
</style>

推荐答案

您可以在此处看到特定性是获得您想要的东西所必需的.使用 Vuetify 文档中的代码笔，这些更改适用于 v-data-table.请记住，Vuetify 在不使用加载器的情况下需要一些奇怪的 CSS 解决方法，例如需要使用代替或使用 !important 标签.

You can see that specificity is required to get what you want here. Using the code pen from the Vuetify documentation, these changes work on the v-data-table. Keep in mind that Vuetify has some weird CSS workarounds required without using loaders, like needing to use instead of or using !important tags.

https://vuetifyjs.com/en/components/data-tables(选择在 CodePen 中编辑"来测试这些)"

https://vuetifyjs.com/en/components/data-tables (select "Edit in CodePen" to test these)"

.v-data-table th {
  font-size: 20px;
}

.v-data-table td {
  font-size: 20px;
}

有关加载器和 CSS 详细信息的详细信息:Vuetify - CSS 在组件内部不工作(生效)

Details on loaders and CSS details: Vuetify - CSS not working (taking effect) inside component

这篇关于Vuetify v-data-table 不会增加字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！