vue.js - 表格的动态高度(vuetify)

Question

应用程序

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

我尝试设置 table 的高度( v-data-table 或 v-simple-table )，使其顶部和底部齐平。该表具有正确的宽度，并且也正确固定在左上角。问题是，如果我有很多数据，表格只会不断向下扩展。固定标题没有用，因为它们只是向上消失。表格应始终与页眉和页脚之间的空间一样高。

如何设置表格的高度，使其始终适合页眉和页脚之间并且不会向下扩展。

Answer 1

2021 年 1 月 7 日更新 : 基于 @Jack回答，我加了技巧 0 .我想，它应该比其他人更灵活。
技巧 0。您可以创建自己的页面模板并将其与 结合使用。 v-resize 指示。
带有标题、标题、过滤器和表格块的示例页面:

<template>
  <div v-resize="onResize">
    <slot name="header" />
    <slot name="toolbar" />
    <slot name="filter" />
    <div ref="resizableDiv">
      <slot name="table" :table-height="tableHeight" />
    </div>
  </div>
</template>

<script>
export default {
  name: "resizable-page",
  data() {
    return {
      tableHeight: 0,
    };
  },
  props: {
    footerHeight: {
      type: Number,
      default: 59, //default v-data-table footer height
    },
  },
  methods: {
    onResize() {
      this.tableHeight =
        window.innerHeight -
        this.$refs.resizableDiv.getBoundingClientRect().y -
        this.footerHeight;
    },
  },
};
</script>

有一个 codesandbox with the example .

旧答案:
我最近遇到了同样的问题，还没有找到简单的解决方案。
但是有两个技巧可能对您有所帮助。
技巧一。使用 v-data-table 属性 高度 在 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>

使用这个技巧，您可以使表格根据浏览器窗口的高度缩小和增长。
一些优点:

相当简单的解决方案 - 您应该只预先计算 vh 值

大多数情况下看起来没问题

一些缺点:

您应该为每个页面上的每个表设置一个特定的 vh。这不是通用的解决方案。

从某个浏览器窗口高度开始，您将在浏览器中获得 2 个滚动条 - 一个在表格中，另一个用于整个页面。为了尽可能避免第二个滚动条的出现，您应该指定尽可能低的 vh 值。所以，在大屏幕上，表格和页脚之间仍然会有一些空间。

技巧 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>

高度 Prop 中的常量注释: 64 是您的标题高度， 24 - 表格填充(顶部 12 + 底部 12)， 59 - 表页脚高度， 36 - 页脚高度。
一些优点:

如果您正确地预先计算了您的高度，第二个滚动条将永远不会出现，您的表格将适合您的页眉和页脚之间的页面。

一些缺点:

不是通用的解决方案

您应该为每一页计算这个高度。这将比技巧 1 困难得多。另外不要忘记某些元素(例如表格过滤器)可能会根据某些尺寸(如 xs、sm、md 等)改变它们的高度

还要看看在这两种情况下我都使用 固定标题属性。这个属性最初是在 Vuetify 2.0 中引入的，(根据文档)在 IE11 中不起作用。