javascript - 验证 : 2 rows in a card

Question

我试图创建新行来放置我的表格组件，我希望它占据整行
我试过了

<v-col cols="12">
    <Table />
</v-col>

它向右

我正在尝试在卡片中有 2 行

第一行(图标)+ 标题和副标题

第二行表

<template>
    <v-container fluid class="my-5">
        <v-row>
            <v-col cols="12">
                <v-card elevation="2" class="d-flex">
                    <!-- Icon -->
                    <v-col cols="1">
                        <v-card-title>
                            <v-btn text color="black">
                                <v-icon left x-large>{{ icon }}</v-icon>
                            </v-btn>
                        </v-card-title>
                    </v-col>

                    <!-- Title & Subtitle -->
                    <v-col cols="11">
                        <v-card-title>
                            {{ title }}
                        </v-card-title>
                        <v-card-subtitle style="color: #757575"> {{ subtitle }} </v-card-subtitle>

                        <Table />
                    </v-col>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

Answer 1

vuetify 组件 v-card 定义了几个区域:

<v-card>
  <v-card-title></v-card-title>
  <v-card-subtitle></v-card-subtitle>
  <v-card-text></v-card-text> <!-- this is the body of the card, where you should insert your table -->
  <v-card-actions></v-card-actions>
</v-card>

在这里，您可以从这个概念中获得样本: https://codepen.io/jssDev-/pen/YzrVZjJ