Vuetify：一张卡片中的 2 行

Posted 2023-02-16

【中文标题】Vuetify：一张卡片中的 2 行

【英文标题】：Vuetify : 2 rows in a card

【发布时间】：2022-01-19 20:23:17

【问题描述】：

我尝试创建新行以将我的表格组件放在那里，我希望它占据整行

我试过了

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

【问题讨论】：

我认为您需要在卡片组件中添加另一个 <v-container> 才能正确调整 <v-row> 和 <v-col>。

你试过用<v-card-text>和<v-card-title>代替rows和cols吗？

@Mael 我试过了。我错过了

@RenaudC5 我对 Vuetify 很陌生，我已经尝试过了，它到处都是，如果你知道任何好的样本，请指出我。我很乐意给试一试。

你很少需要多个 v-containers。

【参考方案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>

【参考方案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>

【讨论】：

你的 sn-p 没有显示正确的数据i.imgur.com/NIQGOay.png

sn-ps 没有 Vuetify，所以在运行 sn-p 时，卡片标题和文字没有意义。如果您将代码粘贴到项目代码库中，它应该可以工作。

【参考方案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

【讨论】：

应该是v-card-text 而不是v-text

你是对的。已编辑

i.imgur.com/9SQ02v9.png 你的图标，以及平铺/副标题。