如何在Vuetify表中设置粘性标题？

Question

我想粘贴标题，我已经尝试过“ fixed：true ”，它不起作用。 滚动表格时，操作列的标题不固定，我已在屏幕截图上将其标记出来。

这是我的表格标签：

 <v-data-table
    :headers="headers"
    :items="rooms"
    sort-by="calories"
    class="elevation-1"
    fix-header
  >

这是我的标头数据： 标头：[{文本：“测试”，值：“操作”，固定：true}，           {文字：“ test1”，值：“ action”}]

Answer 1

fixed-header属性仅在定义了表格高度的情况下有效。

我写了一篇小文章，用位置：粘性：https://medium.com/untitled-factory/sticky-table-header-in-vuetify-js-fab39988dc3

来解释我对这个问题的解决方案

总体思路是将位置设置为粘滞，将上限值设置为0（或固定站点标题的高度）。唯一的障碍是Vuetify.js数据表已溢出，可以通过/ deep /选择器解决：

    .v-data-table /deep/ .v-data-table__wrapper {
        overflow: unset;
    }

这是一个完整的工作示例：https://codesandbox.io/s/sticky-vuetify-table-header-3o0km

Answer 2

尝试使用position: fixed，如下所示：

.v-data-table .v-data-table__wrapper table thead tr {
      position: fixed;
}