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

Question

I have the following code, which renders the expected table:

<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>

I was hoping that appending the display-2 class will do the trick for me, but it seems it doesn't have any effect:

<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>

I also tried the following, but it simply renders a bunch of empty row elements. This is not shocking, as I suppose vuetify now expects that I will provide a complete template for each of the rows?

<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>

In my last attempt my code rendered more td elements per row than I expected, also all the columns were empty:

<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>

What am I doing wrong, is there a simpler way?

BTW: I'm not a JavaScript dev.

Answer 1

If you don't have too many columns, you can use a slot for each and wrap them in a div with a custom class like below:

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

edit: In your case when you get columns dynamically, you can use body slot as you already tried but then you will have a custom styling for the whole table body. Give it a try as below, it is untested.

<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' should be an array of column names as string that you are fetching dynamically.

Answer 2

It's important you don't use the style 'scoped'.

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

The v-data-table must be the specified class 'my-class'

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

Answer 3

It works for me don't use the style scoped.

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