表格的动态高度（vuetify）

Question

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

Home.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 的回答，我添加了trick 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>

有一个codesandbox with the example。

---

旧答案：

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

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

技巧 1. 在 vh 中使用 v-data-table 属性 height。示例：

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

height prop 中的常量注意事项：64 是您的标题高度，24 - 表格填充（顶部为 12，底部为 12），59 - 表格页脚高度，36 - 页脚高度。

一些优点：

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

一些缺点：

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

还要看看在这两种情况下我都使用 fixed-header 属性。该属性最初是在 Vuetify 2.0 中引入的，（根据文档）在 IE11 中不起作用。

Answer 2

另一种解决方案是将 v-data-table 包装在一个 div 中，并通过虚拟 DOM 访问它。

然后您可以将任何高度计算应用于您的 div 并在 v-data-table 上使用它的高度。

<v-layout fluid v-resize="updateDataTableHeight">
  <div ref="parentDiv">
    <v-data-table
      :height="dataTableHeight"
    /></v-data-table>
  </div>
</v-layout>
...
<script>
  export default {
    data () {
      return {
        ...
        dataTableHeight: 0,
      }
    },
    ...
    methods: {
      updateDataTableHeight () {
      this.dataTableHeight= this.$refs.parentDiv.clientHeight;
      },
    }
  };
</script>

这不是一个完美的解决方案，但它提供了更大的灵活性，例如% 和calc CSS 样式。