Question

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

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

 <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>

Answer 1

您可以看到在这里获得想要的东西是必需的。使用Vuetify文档中的代码笔，这些更改将在v-data-table上生效。请记住，Vuetify需要一些奇怪的CSS解决方法而不使用加载器，例如需要使用代替或使用!important标签。

https://vuetifyjs.com/en/components/data-tables （选择“在CodePen中编辑”以对其进行测试）”

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

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

有关加载程序的详细信息和CSS详细信息： Vuetify - CSS not working (taking effect) inside component

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

1 个答案: