Vuetify 使卡片的内容（表格）适合其中答案

【问题标题】：Vuetify make content (table) of card fit inside itVuetify 使卡片的内容（表格）适合其中
【发布时间】：2020-09-13 17:00:39
【问题描述】：

我在带有标题和表格的对话框中有一张卡片（将来会更复杂）。该对话框有一个设置宽度=“80vw”。我不希望对话框和卡片滚动，但我希望表格滚动并固定标题，因此您始终可以看到列名。当我以像素为单位为表格设置固定高度时，它会自动执行我想要的操作，但是使用溢出-y 或百分比高度什么也不做。

我怎样才能使桌子适合卡片？

<v-card height="80vh">
   <v-card-title>
      Files
   </v-card-title>
   <v-card-text>
      <v-simple-table fixed-header>
         <template v-slot:default>
            <thead>
               <tr>
                  <th class="text-left">Name</th>
               </tr>
            </thead>
            <tbody>
               <tr v-for="file in files" :key="file.name" @click="select(file)">
                  <td>
                     <v-icon>{{ file.directory ? "mdi-folder-outline" : "mdi-file" }}</v-icon>
                     {{ file.name }}
                  </td>
               </tr>
            </tbody>
         </template>
      </v-simple-table>
   </v-card-text>
</v-card>

【问题讨论】：

标签： javascript css vue.js vuetify.js

【解决方案1】：

我已经设法使用 d-flex、溢出和放弃 vuetify 布局而只使用 div 来做到这一点。对我来说，这感觉像是一种 hack，而不是它应该完成的方式，但我还没有找到更好的解决方案。有点像 bootsrap 样式的布局不支持项目的拉伸和收缩，这非常令人失望。

<v-card height="80vh" class="d-flex">
   <v-container class="d-flex flex-column" fluid>
      <div>
         Files
      </div>

      <v-simple-table fixed-header class="d-flex flex-column" style="overflow-y: hidden">
         <template v-slot:default>
            <thead>
               <tr>
                  <th class="text-left">Name</th>
               </tr>
            </thead>
            <tbody style="overflow-y: scroll">
               <tr v-for="file in files" :key="file.name" @click="select(file)">
                  <td v-ripple>
                     <v-icon>{{ file.directory ? "mdi-folder-outline" : "mdi-file" }}</v-icon>
                     {{ file.name }}
                  </td>
               </tr>
            </tbody>
         </template>
      </v-simple-table>

   </v-container>
</v-card>

【讨论】：