Vuetify datatable, как разместить таблицу по вертикали, а нижний колонтитул разбивки на страницы придерживается нижней части - PullRequest
Новая
       41

Vuetify datatable, как разместить таблицу по вертикали, а нижний колонтитул разбивки на страницы придерживается нижней части

1 голос
/ 28 мая 2020

Мне трудно подогнать vuetify datatable к экрану, а нижний колонтитул разбивки на страницы прилипает к нижней части экрана, независимо от количества строк в таблице данных.

Я попытался настроить нижний колонтитул на использование следующего css, чтобы он всегда оставался внизу, но это не работает должным образом 

  #table .v-data-footer {
  position: absolute;
  bottom: 0;
}

#table .v-data-table__wrapper {
  height: 400px;
  margin-bottom: 100px;
  overflow: auto scroll;
}

Когда в таблице данных больше строк, он просто подталкивает пагинацию вниз, и он не виден, пока я не прокручу его до самого низа. Одна вещь, которую я также пытался сделать, - установить фиксированную высоту для таблицы данных, но это не идеально из-за размеры устройства, для большего размера экрана он ведет себя очень странно.

У меня есть codepen с простой таблицей данных, когда мы увеличиваем количество строк из элемента управления разбиением на страницы, он загружает большее количество строки и нижний колонтитул просто скрыты из-за высоты. Я ожидаю, что таблица данных будет иметь высоту для содержимого, чтобы пользователь мог прокручивать строки, а элемент управления разбиением на страницы всегда должен оставаться внизу, независимо от размера устройства.

Я был бы очень признателен, если бы кто-нибудь может помочь или подскажет по этому поводу.

Ответы [ 2 ]

0 голосов
/ 03 июня 2020

ваш только код 1. код v-data-table в v-container1 2.put || style = "height: xxxx" || class = "elevation-1 overflow-y-auto" || в v-data-table 3. код v-pagination в v-container2 попробуйте !!!!! 

<template>
<div>
      <v-container>
        <v-data-table
          :headers="headers"
          :items="items"
          :page.sync="page"
          :items-per-page="5"
          class="elevation-1 overflow-y-auto"
          :search="search"
          hide-default-footer
          @page-count="pageCount = $event"
          style="height: 300px"
        >
        </v-data-table>
      </v-container>
      
      <v-container>
        <div class="text-center pt-2">
          <v-pagination
            v-model="page"
            :length="pageCount"
          ></v-pagination>
        </div>
      </v-container>
</div>

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

Если вы хотите, чтобы экран соответствовал таблице v-данных. вы можете использовать position: fixed для нижнего колонтитула и установить поле для оболочки (такое же, как высота нижнего колонтитула): 

#table .v-data-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
}

#table .v-data-table__wrapper {
  margin-bottom: 60px;
}

https://codepen.io/hans-felix/pen/MWaMENQ

...