时间戳

首页 > 解决方案 > 如何更改 vuetify 数据表中的字体大小和/或样式？

javascript - 如何更改 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"
>
</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 开发人员。

标签： javascriptvue.jsvuetify.js

解决方案

如果您没有太多列，则可以为每个列使用一个插槽，并将它们包装在一个带有自定义类的 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' 应该是一个列名数组，作为您动态获取的字符串。

推荐阅读