如何解决增加 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;
}
,
应用专门针对 v-data-table
标头类的样式:
thead.v-data-table-header th[role=columnheader] {
font-size: 14px !important;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。