Vuetify - v-data-table 打破 v-card 的高度

Question

我使用 Vuetify 开发仪表板。我需要所有具有特定高度的卡片，在本例中为 450 像素。我从 axios 请愿书中填充 v-data-table，当 v-data-table 填充 whit 数据时，它打破了 v-card 的高度。

查看 v-card Tabla Tarificador carteras

这是我的 v-card 组件代码：

<v-row>
    <v-col cols="12" md="7">
        <v-card height="450">
            <v-card-text>
                <v-row>
                    <v-col cols="12">
                        <v-data-table
                            :fixed-header="true"
                            :headers="tablas.tarificadorCarteras.cabeceras"
                            :items="tablas.tarificadorCarteras.datos"
                        >
                            <template v-slot:[`item.cartera`]="{ item }">
                                <a @click="obtenerGraficoTarificadorCartera(item.cartera)" class="text-capitalize">{{ item.cartera }}</a> 
                            </template>
                            <template v-slot:[`item.minutos_entel`]="{ item }">
                                {{ new Intl.NumberFormat('es-CL').format(item.minutos_entel) }}
                            </template>
                            <template v-slot:[`item.minutos_movistar`]="{ item }">
                                {{ new Intl.NumberFormat('es-CL').format(item.minutos_movistar) }}
                            </template>
                            <template v-slot:[`item.minutos_pacifico`]="{ item }">
                                {{ new Intl.NumberFormat('es-CL').format(item.minutos_pacifico) }}
                            </template>
                        </v-data-table>
                    </v-col>
                </v-row>
            </v-card-text>
        </v-card>
    </v-col>
</v-row>

我需要查看 v-card 内的 v-data-table 可滚动和响应式。我试着做，但做不到

Answer 1

将max-height="450" style="overflow-y:auto" 设置为v-col