如何在 Vuetify 表中制作粘性标题？

Question

我想制作粘性标题，我尝试过“ fixed:true ”但不起作用。当我滚动表格时，操作列的标题不固定，我已在屏幕截图上标记它。

这是我的表格标签：

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

这是我的标题数据： headers: [{ text: "test", value: "action",fixed:true}, { text: "test1", value: "action"}]

Answer 1

fixed-header仅当定义了表格高度时，该属性才有效。

我写了一篇小文章，使用位置解释了这个问题的解决方案：sticky：https ://medium.com/@jareklipski/sticky-table-header-in-vuetify-js-fab39988dc3

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

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