Vuetify v-data-table 固定标头不起作用

Question

我使用 Vuetifyv-data-table组件并设置fixed-header属性，但表头与表体一起滚动。我使用最新的 Chrome。任何机构都可以告诉如何修复该行为以使其正常工作吗？

Answer 1

您需要指定高度属性。甚至可以传入 height="100%" 并且它会起作用。

<v-data-table
      height="400"
      v-model="selected"
      :headers="headers"
      fixed-header
      :items="desserts"
      item-key="name"
    >
</v-data-table>

https://codepen.io/ellisdod/pen/gOpzBmQ

Answer 2

对我来说height="100%"不起作用，但以像素为单位设置高度也不适合我，因为我希望表格消耗整个页面的高度，所以我最终得到了height="100vh". 希望它对你们中的一些人有用。

<v-data-table
    :headers="headers"
    :items="items"
    disable-pagination
    fixed-header
    hide-default-footer
    dark
    height="100vh">
</v-data-table>

PS：将它作为评论放在已接受的答案下可能是个好主意，但我没有足够的声誉，所以对不起各位:)

Answer 3

如果您不想要固定高度并希望您的桌子占据所有可用空间，我找到了一个解决方案。

flex-grow: 1; overflow: hidden;只需在容器上使用 flexbox ，并为表本身设置一个类display: flex; flex-grow: 1;

这是 codepen 演示：https://codepen.io/esquilax76/pen/gOoGyPb

希望能帮助到你 ！