我有以下代码,它呈现预期的表:
<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类可以达到这个目的,但似乎没有任何效果:
<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开发人员。
6条答案
按热度按时间hxzsmxv21#
如果你没有太多的列,你可以为每一列使用一个slot,然后用一个定制类将它们 Package 在一个div中,如下所示:
编辑:在你的情况下,当你动态地得到列,你可以使用body slot,就像你已经尝试过的那样,但是这样你就可以为整个表体定制样式了。给予一下,如下所示,它还没有经过测试。
“cols”应该是一个列名称数组,作为动态获取的字符串。
h5qlskok2#
@Cristian D.的回答是最简洁的,但对于vuetify v2来说,应该是“cellClass”而不是“Class”。
请参见https://v2.vuetifyjs.com/en/api/v-data-table/#props-headers
oyxsuwqo3#
不要使用“scoped”样式,这一点很重要。
v-data-table必须是指定的类“my-class”
idfiyjo84#
不要使用限定范围的样式。
7ajki6be5#
它对我很有效,不要使用限定范围的风格。
igsr9ssn6#
你不需要特别通过“style”来应用任何样式。当你使用表格时,你应该像这样在data()中声明你的标题:
在 * 中,你可以用Vuetify提供的任何字体大小替换它。你可以在这里看到所有这些字体:
https://v15.vuetifyjs.com/en/framework/typography/
因此,如果您希望字体适合h3,您应该将上面的 * 替换为:
希望这对你有所帮助。另外,如果你想拥有一个特定的颜色,你可以使用类“primary--text”,它会从你实际的vuetify主题中获取“primary”值。在这里可以看到更多的内容:
https://vuetifyjs.com/en/features/theme/