Question

我尝试使用固定标题和自动调整的高度来制作包含 tbody 的包装div的扩展空间。我花了几天时间来解决这个问题，但每个解决方案都有自己的问题，我很乐意向你寻求帮助。

我正在使用 Vue 和 Gridstack ，因为我想拥有可调整大小和可拖动的模块。

$(document).ready(function(){
  $(function () {
    $('.grid-stack.outer').gridstack({
      cellHeight: 80,
      verticalMargin: 20,
      horizontalMargin: 10
    });

    $('.grid-stack.inner').gridstack({
      cellHeight: 70,
      verticalMargin: 20,
      horizontalMargin: 10
    });
  });
});

予。 https://codepen.io/anon/pen/eMpXrN
     - 适用于Mac（Chrome和Safari）
     - 无法在Windows上工作， Edge ：标题未修复
     - 不能在Windows上工作， Chrome ：当在tbody上看到滚动时，标题不会填充列（tbody被移动）;例如：https://www.dropbox.com/s/e730d7z4p10wpoe/Zrzut%20ekranu%202018-03-13%2011.20.30.png?dl=0）

II。 https://codepen.io/anon/pen/LdpaKz
- 工作几乎完美但如果我们水平滚动，标题不会跟随内容 - 示例：https://www.dropbox.com/s/jqe0b0k8a3qcr0v/Zrzut%20ekranu%202018-03-13%2011.25.18.png?dl=0

总结：
到目前为止，我花了几天时间，试图建立工作台。我已经尝试过基于flexbox的表格（除了不可能修复标题之外，它很有用），常规表格。我惨遭失败我正在寻找的是创建以下表格：
- 不需要jQuery（它可以使用vanilla JS）
- 有固定的标头
- 水平滚动两个标题与内容
- 自动调整单元格的宽度，以防用户调整大小（并保持该列的列和标题的宽度相同）

这真的是不可能实现的吗？我事件想要观察列的宽度并相应地调整标题的宽度，但是使用gridstack，DOM不会在vue中更新它的宽度。

PS。我必须得到常规DOM（不仅仅是注入数据数组）我可以修改，因为表中可能有复杂的元素。

我已经尝试过数据表但是当它调整大小时我无法填充gridstack包装器。

谢谢！

创建具有固定标头的真正工作表

0 个答案: