使用 Tabulator 设置最大表格高度答案

【问题标题】：Setting maximum table height with Tabulator使用 Tabulator 设置最大表格高度
【发布时间】：2019-01-14 09:17:56
【问题描述】：

Tabulator 库似乎支持两种设置表格高度的模式：一个显式值（如果数据集中没有足够的行，它会在底部强制一个“灰色”区域；如果数据集太多，则使用垂直滚动条许多行），或自动模式（调整高度以适合实际数据，不创建滚动条）。

是否可以使用最大高度，以便在需要时出现垂直滚动条，否则高度根据内容调整？

【问题讨论】：

【解决方案1】：

没有关于此的真正记录。但是我发现为 .tabulator-tableHolder 类分配最大高度可以完成工作。

.tabulator-tableHolder {
  max-height: 100px !important;
}

请注意，这会禁用虚拟 DOM，如果您有很多行，这将影响性能。

【讨论】：

谢谢！它可以工作，但不指定显式高度似乎会禁用 vdom（并指定高度禁用最大高度）。
这设置了最大高度，但没有给出下面有更多行的滚动条。
使用这种方法，如果我们有 500 行，那么溢出的行将被隐藏。并且不要尝试设置溢出：滚动，因为您将失去 virtualDOM 的优势并且所有内容都将立即呈现，这将使浏览器非常慢。这个问题仍然没有答案。
滚动工作开箱即用，请参阅jsfiddle.net/a3vk0u6h。如果它对您不起作用，那是由于您的一些自定义 CSS。是的，这种方法禁用了 virtualDOM。我已经在我的答案中添加了关于此的注释。目前无法使用动态表格高度和 virtualDOM。但是，如果您有一个很好的用例，您可能想前往 Tabulator 的 Github 并请求它作为一项功能。

【解决方案2】：

从 4.6 版开始，您现在可以使用表格构造器对象中的 maxHeight 属性设置表格的最大高度：

var table = new Tabulator("#example-table", {
    maxHeight:"100%", //do not let table get bigger than the height of its parent element
});

这样做还可以提高渲染效率，因为当表格超过其父元素的高度时，表格将使用虚拟 DOM，从而减少页面的加载时间

【讨论】：

谢谢，这很好用！文档建议设置 CSS 属性应该具有相同的效果（也启用虚拟 DOM？）。也许值得澄清文档（如果显式设置和 CSS 属性之间存在差异）或您上面的答案（“这样做”）。同样在文档中，当指定 maxHeight 时，“慢速渲染”免责声明不适用并不是 100% 清楚。
通过只设置最大高度，它以经典模式渲染，直到达到最大高度，然后在超过高度时使用 vDOM