Question

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

请参阅v卡 Tabla Tarificador carteras

这是我的V卡组件代码：

<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卡中的v数据表可滚动且响应迅速。我试图做到，但是不能

Answer 1

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

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

1 个答案: