1

我正在尝试制作具有固定标题和自动调整高度的表格，以用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
    });
  });
});

I. 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 ）

二、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 包装器。

谢谢！

4

0 回答 0