表格的动态高度（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>

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

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

Answer 1

2021 年 1 月 7 日更新：基于@Jack 的回答，我添加了技巧 0。我想，它应该比其他人更灵活。

技巧 0.您可以创建自己的页面模板并将其与v-resize指令结合使用。

带有Header、Title、Filter和Table块的示例页面：

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

有一个带有示例的代码沙盒。

旧答案：

我最近遇到了同样的问题，还没有找到简单的解决方案。

但是有两个技巧可能对您有所帮助。

技巧 1.在vh 中使用 v-data-table 属性高度。例子：

<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. 您应该为每个页面上的每个表设置一个特定的 vh。这不是通用的解决方案。
2. 从某个浏览器窗口高度开始，您将在浏览器中获得 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>

高度属性常量的注释：64是您的页眉高度，24 - 表格填充（顶部 12 + 底部 12），59 - 表格页脚高度，36 - 页脚高度。

一些优点：

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

一些缺点：

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

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