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

Question

我有以下代码，它呈现预期的表：

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

Answer 1

如果您没有太多列，您可以为每个列使用一个插槽，并将它们包装在一个带有自定义类的 div 中，如下所示：<template v-slot:item.name="{ item }">&nbsp; &nbsp;<div class="customStyle">{{ item.name }}</div></template>编辑：在您动态获取列的情况下，您可以使用已经尝试过的主体槽，但随后您将拥有整个表格主体的自定义样式。试一试如下，未经测试。<template v-slot:body="{ items }">&nbsp; <tr v-for="item in items" :key="item.id" class="customClass">&nbsp; &nbsp; <td v-for="col in cols">&nbsp; &nbsp; &nbsp; {{ item.col }}&nbsp; &nbsp; </td>&nbsp; </tr></template>'cols' 应该是一个列名数组，作为您正在动态获取的字符串。

Answer 2

它对我有用，不使用范围的样式。.v-data-table > .v-data-table__wrapper > table > thead > tr > th{&nbsp; &nbsp; &nbsp;font-size: 16px !important;&nbsp;}

Answer 3

我有以下代码，它呈现预期的表：<v-data-table&nbsp; &nbsp; dense&nbsp; &nbsp; :headers="table_headers"&nbsp; &nbsp; :items="table_data"&nbsp; &nbsp; :items-per-page="table_rows"&nbsp; &nbsp; :page="table_page"&nbsp; &nbsp; :hide-default-footer=true&nbsp; &nbsp; :loading="table_loading"&nbsp; &nbsp; class="elevation-2"></v-data-table>我希望附加display-2类对我有用，但它似乎没有任何效果：<v-data-table&nbsp; &nbsp; dense&nbsp; &nbsp; :headers="table_headers"&nbsp; &nbsp; :items="table_data"&nbsp; &nbsp; :items-per-page="table_rows"&nbsp; &nbsp; :page="table_page"&nbsp; &nbsp; :hide-default-footer=true&nbsp; &nbsp; :loading="table_loading"&nbsp; &nbsp; class="elevation-2 display-2"></v-data-table>我也尝试了以下方法，但它只是渲染了一堆空row元素。这并不令人震惊，因为我想 vuetify 现在希望我为每一行提供一个完整的模板？<v-data-table&nbsp; &nbsp; dense&nbsp; &nbsp; :headers="table_headers"&nbsp; &nbsp; :items="table_data"&nbsp; &nbsp; :items-per-page="table_rows"&nbsp; &nbsp; :page="table_page"&nbsp; &nbsp; :hide-default-footer=true&nbsp; &nbsp; :loading="table_loading"&nbsp; &nbsp; class="elevation-2">&nbsp; &nbsp; <template v-slot:item="props">&nbsp; &nbsp; &nbsp; &nbsp; <tr class="display-2"></tr>&nbsp; &nbsp; </template></v-data-table>在我最后一次尝试中，我的代码td每行渲染的元素比我预期的要多，而且所有列都是空的：<v-data-table&nbsp; &nbsp; dense&nbsp; &nbsp; :headers="table_headers"&nbsp; &nbsp; :items="table_data"&nbsp; &nbsp; :items-per-page="table_rows"&nbsp; &nbsp; :page="table_page"&nbsp; &nbsp; :hide-default-footer=true&nbsp; &nbsp; :loading="table_loading"&nbsp; &nbsp; class="elevation-2">&nbsp; &nbsp; <template v-slot:body="{ items }">&nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr v-for="row in items">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td v-for="col in row"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="display-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ col }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </template></v-data-table>我做错了什么，有没有更简单的方法？顺便说一句：我不是 JavaScript 开发人员。