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

Question

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

原文由 Kavachaj 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 ellisdod 发布，翻译遵循 CC BY-SA 4.0 许可协议

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：将它作为评论放在已接受的答案下可能是个好主意，但我没有足够的声誉，对不起大家:)

原文由 O. Desiatnyk 发布，翻译遵循 CC BY-SA 4.0 许可协议