Vuetify Data Table ограничивается только 10 строками? - PullRequest
Новая
       5

Vuetify Data Table ограничивается только 10 строками?

0 голосов
/ 07 апреля 2020

Я использую таблицу данных от Vuetify: 

<v-data-table
  :ref="`sortableTable${index}`"
  class="items-table-container"
  :headers="headers"
  :items="category.items"
  hide-default-footer>

    ...custom rows

</v-data-table>

Я заметил, что при добавлении нового элемента в таблицу он не появляется. Я проверил, что у предметов, которые я передаю, есть 11 предметов, однако таблица показывает только 10 макс.

Когда я посмотрел на обертку вокруг стола, я заметил, что она имеет: 

overflow-x: auto;
overflow-y: hidden;

, но по какой-то причине я не могу переопределить ее. Я попытался добавить height prop, но, похоже, ничего не работает.

Как я могу задать для таблицы автоматическую высоту, чтобы она увеличивалась независимо от количества строк в таблице?

1 Ответ

2 голосов
/ 07 апреля 2020

Эта проблема возникает из-за того, что вы удалили нижний колонтитул по умолчанию, используя hide-default-footer, но разбиение на страницы по-прежнему включено. По умолчанию установлено разбиение на страницы, чтобы в строке отображалось только 10 элементов. Вы можете легко исправить это, просто добавив disable-pagination опции, которые полностью отключают нумерацию страниц, а затем вы можете увидеть все элементы после десятого индекса. 

<v-data-table
  :ref="`sortableTable${index}`"
  class="items-table-container"
  :headers="headers"
  :items="category.items"
  hide-default-footer
  disable-pagination>

DEMO: 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      headers: [{text:"Dessert (100g serving)",align:"start",sortable:!1,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: headers=[{name:"Frozen Yogurt",calories:159,fat:6,carbs:24,protein:4,iron:"1%"},{name:"Ice cream sandwich",calories:237,fat:9,carbs:37,protein:4.3,iron:"1%"},{name:"Eclair",calories:262,fat:16,carbs:23,protein:6,iron:"7%"},{name:"Cupcake",calories:305,fat:3.7,carbs:67,protein:4.3,iron:"8%"},{name:"Gingerbread",calories:356,fat:16,carbs:49,protein:3.9,iron:"16%"},{name:"Jelly bean",calories:375,fat:0,carbs:94,protein:0,iron:"0%"},{name:"Lollipop",calories:392,fat:.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,carbs:51,protein:4.9,iron:"22%"},{name:"KitKat",calories:518,fat:26,carbs:65,protein:7,iron:"6%"},{name:"Jelly bean",calories:375,fat:0,carbs:94,protein:0,iron:"0%"},{name:"Lollipop",calories:392,fat:.2,carbs:98,protein:0,iron:"2%"},
{name:"Ice cream sandwich",calories:237,fat:9,carbs:37,protein:4.3,iron:"1%"},{name:"Eclair",calories:262,fat:16,carbs:23,protein:6,iron:"7%"},{name:"Cupcake",calories:305,fat:3.7,carbs:67,protein:4.3,iron:"8%"},
{name:"Ice cream sandwich",calories:237,fat:9,carbs:37,protein:4.3,iron:"1%"},{name:"Eclair",calories:262,fat:16,carbs:23,protein:6,iron:"7%"},{name:"Cupcake",calories:305,fat:3.7,carbs:67,protein:4.3,iron:"8%"}],
    }
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout column>
        <v-data-table :headers="headers" 
          :items="desserts" 
          class="elevation-1" 
          hide-default-footer 
          disable-pagination
          dense>
        </v-data-table>
      </v-layout>
    </v-container>
  </v-app>
</div>
...