vuetify.js - 有没有办法卡住 vuetify 数据表中的列？

Question

如果不使用 vuetify fork，我无法找到一个好的解决方案，它不稳定并且无论如何似乎都是旧版本。我会在评论中链接到它。

我能想到的唯一方法是将两个数据表并排排列，这本身就会产生问题。我知道还有其他插件/库允许这样做，但我真的更愿意坚持使用 vuetify。有没有人成功地做到这一点？

我的项目是创建一个允许用户设置旋转的网格。每列(在第一列之后)是一个动态创建的周(星期五的日期是列标题)，显示给定组织中是否有空缺。斗争是获得足够的星期一次出现在屏幕上。第一列是组织。因此，当我向右滚动时，我想知道在给定的一周内我的行所在的组织。这就是为什么我需要卡住第一列。

我对其他解决方案持开放态度 - 就像显示标题的不同方式一样，也许可以让我适应 52 周的日期。

Answer 1

我也在寻找解决方案。我发现的最近的是这个复杂的 CSS Source

<style>
  table > tbody > tr > td:nth-child(1),
  table > thead > tr > th:nth-child(1) {
    position: sticky !important;
    position: -webkit-sticky !important;
    left: 0;
    z-index: 9998;
    background: white;
  }
  table > thead > tr > th:nth-child(1) {
    z-index: 9999;
  }
</style>

但是，它对我的​​情况不太适用。
我有这样的事情

Account           Jan    Feb    Mar
123456             50     51    52
123458             38     39    32
123600             20     21    22

所以我正在寻找的 Excel 相当于在 Jan,123456 交叉点上放置一个卡住 Pane ，以便向下滚动时月份保持原位，向右滚动时帐户列保持原位。
我在 v-data-table 上设置了 fixed-header 和 :height 属性，这样标题就不会垂直滚动，并且它有一个垂直滚动条。水平滚动条似乎是自动发生的，并且特定于表格而不是页面。
如果没有 CSS，垂直滚动可以工作，但显然不是水平滚动，因为 Account 列从屏幕向左滚动。
使用 CSS，帐号保持原位，但标题仍向左滚动，因此例如 Jan 替换了 Account。此外，向下滚动时，帐号会向上滚动以覆盖帐号。与 Vuetify 提供的基础知识相比，它更接近于解决方案。
我还看到了某人克隆 vuetify 并将其修改为包含固定列和分组的示例。但是，我不确定那是 vuetify 1.5 还是 vuetify 2，而且我已经遇到了在 1.5 上查看示例的问题，然后发现它们在我使用的 vue 2 上不起作用，因为有很多重大更改。像你一样，我也对采用可能不受支持的东西持谨慎态度。
我很惊讶 Vuetify 没有包含这个。这一定是一个非常普遍的要求。我已经看到了对 Vuetify 3 的增强请求，但现在采用它还为时过早，据推测这也意味着采用 Vue 3。
问候
保罗·西蒙