Vuetify заставляет содержимое (таблицу) карты помещаться внутри нее - PullRequest
Новая
       5

Vuetify заставляет содержимое (таблицу) карты помещаться внутри нее

0 голосов
/ 26 мая 2020

У меня есть карточка внутри диалога с заголовком и таблицей (в будущем она будет более сложной). Диалог имеет ширину "80vw". Я не хочу, чтобы прокручивалось ни диалоговое окно, ни карточка, но я бы хотел, чтобы таблица прокручивалась с фиксированным заголовком, чтобы вы всегда могли видеть имена столбцов. Когда я устанавливаю для таблицы фиксированную высоту в пикселях, она автоматически выполняет то, что я хочу, однако использование overflow-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>

1 Ответ

0 голосов
/ 28 мая 2020

Мне удалось сделать это, используя d-flex, переполнение и отказавшись от макета vuetify и просто используя вместо этого div. Мне это кажется хакерским, а не тем, как это должно быть сделано, но я пока не нашел лучшего решения. Кажется, что макет в стиле bootrap не поддерживает растягивание и сжатие элементов, что очень разочаровывает. 

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