Dynami c высота стола (vuetify) - PullRequest
Новая
       6

Dynami c высота стола (vuetify)

2 голосов
/ 22 января 2020

Приложение. vue

<template>
    <v-app id="inspire">
        <v-navigation-drawer
                v-model="drawer"
                app
        >
            <v-list dense>
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-home</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>Home</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-contact-mail</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>Contact</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app-bar
                app
                color="indigo"
                dark
        >
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"/>
            <v-toolbar-title>Application</v-toolbar-title>
        </v-app-bar>

        <v-content>
            <v-container fluid>
                <router-view></router-view>
            </v-container>
        </v-content>
        <v-footer
                color="indigo"
                app
        >
            <span class="white--text">&copy; 2019</span>
        </v-footer>
    </v-app>
</template>

Дом. vue: 

<template>
    <v-layout fluid>
        <template>
            <v-data-table
                    height="100%"
                    :headers="headers"
                    :items="desserts"
                    :items-per-page="10"
                    class="elevation-1"
                    style="margin: 0px; padding: 0px; width: 100%; height: 100%"
            ></v-data-table>
        </template>
    </v-layout>
</template>

<script>
    export default {
        data () {
            return {
                headers: [
                    {
                        text: 'Dessert (100g serving)',
                        align: 'left',
                        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%',
                    },

                ],
            }
        },
    }
</script>

Я пытаюсь установить высоту стола (v-data-table или v-simple-table) так что это грипп sh сверху и снизу. Таблица имеет правильную ширину и также правильно зафиксирована в левом верхнем углу. Проблема в том, что если у меня много данных, таблица просто расширяется вниз. Фиксированные заголовки бесполезны, потому что они просто исчезают вверх. Таблица всегда должна быть такой же высокой, чтобы между верхним и нижним колонтитулами оставалось место.

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

1 Ответ

3 голосов
/ 23 января 2020

Я недавно столкнулся с той же проблемой и пока не нашел простого решения.

Но есть 2 хитрости, которые могут быть вам полезны.

Уловка 1. Использовать атрибут v-data-table height in vh . Пример: 

<v-data-table
  height="70vh"
  fixed-header
  :headers="headers"
  :items="desserts"
  :items-per-page="10"
  class="elevation-1"
  style="width: 100%"
></v-data-table>

Используя этот прием, вы можете уменьшить и увеличить размер таблицы в соответствии с высотой окна браузера.

Некоторые преимущества:

  1. Довольно простое решение - вам нужно только пересчитать значение VH
  2. В большинстве случаев выглядит нормально

Некоторые недостатки:

  1. Вы должны задать спецификацию c VH к каждой таблице на каждой странице. Это не универсальное решение.
  2. Начиная с определенной высоты окна браузера, вы получите 2 полосы прокрутки в вашем браузере - одну в таблице и другую для всей страницы. Чтобы избежать появления 2-й полосы прокрутки, насколько это возможно, вы должны указать самое низкое возможное значение vh. Таким образом, на больших экранах все еще будет некоторое пространство между таблицей и нижним колонтитулом.

Trick 2. Используйте директиву v-resize и пересчитайте высоту таблицы ,

Пример для вашего шаблона: 

<v-layout fluid v-resize="onResize">
  <v-data-table
    :height="windowSize.y - 64 - 24 - 59 - 36"
    fixed-header
    :headers="headers"
    :items="desserts"
    :items-per-page="10"
    class="elevation-1"
    style="width: 100%"
  ></v-data-table>
</v-layout>
...
<script>
  export default {
    data () {
      return {
        ...
        windowSize: {
          x: 0,
          y: 0,
        },
      }
    },
    ...
    methods: {
      onResize () {
        this.windowSize = { x: window.innerWidth, y: window.innerHeight };
      },
    }
  };
</script>

Примечания для констант в заголовке: 64 - высота вашего заголовка, 24 - заполнение таблицы (12 для верхнего + 12 для нижнего), 59 - высота нижнего колонтитула таблицы, 36 - высота нижнего колонтитула.

Некоторые преимущества:

  1. Если вы правильно рассчитали свой рост, вторая полоса прокрутки никогда не появится, и ваша таблица поместится на вашей странице между верхним и нижним колонтитулами.

Некоторые недостатки:

  1. Не универсальное решение
  2. Вы должны рассчитать эту высоту для каждой страницы. Это будет намного сложнее, чем в уловке 1. Также не забывайте, что некоторые элементы (например, фильтры таблиц) могут изменять свою высоту в соответствии с некоторыми размерами (например, xs, sm, md, ...)

Также обратите внимание, что в обоих случаях я использую атрибут fixed-header . Этот атрибут был впервые введен в Vuetify 2.0 и (согласно документации) не работает в IE11.

...