Vuetify：一张卡片中的 2 行

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 中的grid system 的理解。

一个好的做法是始终将 col 放在一行中。

另外，vuetify 有自己的卡片组合方式：

v-card 由 4 个部分组成（每个部分都可以实例化）：

• v-card-actions（包含所有操作按钮（保存、退出等）的组件）
• v-card-subtitle（卡片副标题）
• v-card-text（构成卡片的任何文字）
• v-card-title（卡片名称）

对于您的示例，您可以使用v-card-text 来放置您的表。它将自动被视为包含 12 个列的行。

这里是如何解决您的问题的示例

<template>
  <v-card elevation="2">
      <v-card-title>
        <!-- first row of the card --> 
        <v-row>
          <!-- first col of the row (1/12)  -->
          <v-col cols="1">
            <v-btn text color="black">
              <v-icon left x-large>mdi-link</v-icon>
            </v-btn>
          </v-col>
          <!-- second col of the row (11/12)  -->
          <v-col cols="11">
            Title of the card
          </v-col>
        </v-row>

      </v-card-title>

    <!-- Title & Subtitle -->
      <v-card-subtitle style="color: #757575">
        <!-- second row of the card  -->
        <v-row class="justify-end">
          <!--   col inside the row 11/12 located at the end of the row with the flex class justify-end -->
          <v-col cols="11">
            Subtitle of the vcard
          </v-col>
        </v-row>
      </v-card-subtitle>

      <v-card-text>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="5"
          class="elevation-1"
        ></v-data-table>
      </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "Hello",
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
}
</script>

Answer 2

您需要在每个卡片的子项内创建一个网格并使用偏移量（如下示例），或者在 v-card 内创建一个网格并将卡片子项嵌套在宽度为 col-11 的第二列中（不推荐作为它超出了@jssDev 在另一个答案中提到的推荐卡片和卡片子嵌套）。

<v-card elevation="2">
  <v-card-title>
    <v-row>
      <v-col class="col-1">
        <v-btn text>
          <v-icon left x-large>
            {{ icon }}
          </v-icon>
        </v-btn>
      </v-col>
      <v-col class="col-11 text-start">
        {{ title }}
      </v-col>
    </v-row>
  </v-card-title>

  <v-card-subtitle>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        {{ subtitle }}
      </v-col>
    </v-row>
  </v-card-subtitle>

  <v-card-text>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        <v-data-table :headers="[]" :items="[]" />
      </v-col>
    </v-row>
  </v-card-text>
</v-card>

Answer 3

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