我有以下代码,它呈现预期的表格:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
</v-data-table>
我希望附加 display-2 class 可以为我解决问题,但似乎没有任何效果:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2 display-2"
>
</v-data-table>
我也尝试了以下方法,但它只是渲染了一堆空的 row
元素。这并不令人震惊,因为我想 vuetify 现在希望我为每一行提供完整的模板?
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:item="props">
<tr class="display-2"></tr>
</template>
</v-data-table>
在我上次尝试中,我的代码每行呈现的 td
元素比我预期的要多,而且所有列都是空的:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="row in items">
<td v-for="col in row"
class="display-2">
{{ col }}
</td>
</tr>
</tbody>
</template>
</v-data-table>
我做错了什么,有更简单的方法吗?
顺便说一句:我不是 JavaScript 开发人员。
最佳答案
如果您没有太多列,您可以为每个列使用一个插槽,并将它们包装在带有自定义类的 div 中,如下所示:
<template v-slot:item.name="{ item }">
<div class="customStyle">{{ item.name }}</div>
</template>
编辑: 在您动态获取列的情况下,您可以像您已经尝试过的那样使用主体插槽,但随后您将为整个表格主体提供自定义样式。尝试一下如下,尚未测试。
<template v-slot:body="{ items }">
<tr v-for="item in items" :key="item.id" class="customClass">
<td v-for="col in cols">
{{ item.col }}
</td>
</tr>
</template>
'cols' 应该是一个列名数组,作为您动态获取的字符串。
关于javascript - 如何更改 vuetify 数据表中的字体大小和/或样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58809069/