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

Posted 2023-02-22

【中文标题】Vuetify v-data-table 固定标题不起作用

【英文标题】：Vuetify v-data-table fixed-header not working

【发布时间】：2020-06-27 21:43:30

【问题描述】：

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

【参考方案1】：

您需要指定高度属性。甚至可以传入，就可以了。

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

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

【讨论】：

是的，我知道了 - 我忘了设置桌子的高度，谢谢！

这行得通，但是当我希望数据表基本上占据整个屏幕时，我发现必须设置一个特定的高度很麻烦。

如果您使用的是 v-simple-table 而不是 v-data-table，您还应该确保在 header 中使用 th 标签而不是常规的 td 标签，否则会不工作。

使用 Vuetify v2.5.7 并设置 height="100%" 对我不起作用。然而，设置一个明确的高度。

【参考方案2】：

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

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

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