如何更改vuetify数据表中的字体大小和/或样式?

bybem2ql  于 2023-03-19  发布在  Vue.js
关注(0)|答案(6)|浏览(273)

我有以下代码,它呈现预期的表:

<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开发人员。

hxzsmxv2

hxzsmxv21#

如果你没有太多的列,你可以为每一列使用一个slot,然后用一个定制类将它们 Package 在一个div中,如下所示:

<template v-slot:item.name="{ item }">
   <div class="customStyle">{{ item.name }}</div>
</template>

编辑:在你的情况下,当你动态地得到列,你可以使用body slot,就像你已经尝试过的那样,但是这样你就可以为整个表体定制样式了。给予一下,如下所示,它还没有经过测试。

<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”应该是一个列名称数组,作为动态获取的字符串。

h5qlskok

h5qlskok2#

@Cristian D.的回答是最简洁的,但对于vuetify v2来说,应该是“cellClass”而不是“Class”。
请参见https://v2.vuetifyjs.com/en/api/v-data-table/#props-headers

oyxsuwqo

oyxsuwqo3#

不要使用“scoped”样式,这一点很重要。

<style>
        .my_class td{
            font-size: small!important;
            height: 0!important;
            padding: 1px!important;
        }
    </style>

v-data-table必须是指定的类“my-class”

<v-data-table class="my-class" :items="my_output"  >
    </v-data-table>
idfiyjo8

idfiyjo84#

不要使用限定范围的样式。

#my_custom_table tr td {
  font-size: 18px;
}
<v-data-table
    id="my_custom_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>
7ajki6be

7ajki6be5#

它对我很有效,不要使用限定范围的风格。

.v-data-table > .v-data-table__wrapper > table > thead > tr > th{
     font-size: 16px !important; 
}
igsr9ssn

igsr9ssn6#

你不需要特别通过“style”来应用任何样式。当你使用表格时,你应该像这样在data()中声明你的标题:

data() { headers: [{ text: "Title of your row", sortable: true, class: "*"}]

在 * 中,你可以用Vuetify提供的任何字体大小替换它。你可以在这里看到所有这些字体:
https://v15.vuetifyjs.com/en/framework/typography/
因此,如果您希望字体适合h3,您应该将上面的 * 替换为:

class: "display-2"

希望这对你有所帮助。另外,如果你想拥有一个特定的颜色,你可以使用类“primary--text”,它会从你实际的vuetify主题中获取“primary”值。在这里可以看到更多的内容:
https://vuetifyjs.com/en/features/theme/

相关问题