0

我希望 TurboTable 占据整个父级的高度（并在调整父级大小时调整大小），因此只有表的内容是可滚动的，并且没有滚动条添加到父级组件。

我已经尝试设置 scrollHeight="100%"，但这不能按预期工作：https ://stackblitz.com/edit/angular-d9narm 。

有任何想法吗？

更新：正如@phucnh 更正的那样，我应该使用 scrollHeight="calc(100% - 200px)" 来补偿我的填充。我现在更新了我的 stackblitz 以反映这一点。当窗口第一次加载时，这非常有效，但如果你尝试改变它的高度，桌子的高度不会改变。

4

3 回答 3

2

在CSS中，你设置padding: 100px所以你需要设置scrollHeight="calc(100% - 200px)"

如果要在调整大小时更新高度，则需要处理更多。我在这里建议一个演示

于 2019-01-15T14:02:22.977 回答
2

因此，在@phucnh 的一些帮助和一些谷歌搜索之后，我能够生成允许 TurboTable 采用其所有父大小并正确显示/隐藏滚动条的代码：

https://stackblitz.com/edit/primeng-scrollable-table-fit-parent

基本上，它包含两个技巧：

1）我们需要观察父尺寸的变化并强制Angular通过这段代码重新评估“scrollHeight”：

ngAfterViewInit(): void {
  new ResizeObserver(() => this.zone.run(() => this.onResize()))
    .observe(this.container.nativeElement);
}

private onResize(): void {
    // HACK: mark "scrollHeight" dirty, so it's re-evaluated.
    if (this.table.scrollHeight.endsWith(' ')) {
      this.table.scrollHeight = this.table.scrollHeight.slice(0, -1);
    } else {
      this.table.scrollHeight += ' ';
    }
}

2）为了解决当滚动条出现/消失时标题单元格不对齐的问题，我们需要做一些肮脏的黑客攻击（灵感来自https://stackblitz.com/edit/primeng-dynamic-scrollable）：

// HACK: automatically re-align table header when resized. Borrowed the idea from https://stackblitz.com/edit/primeng-dynamic-scrollable
const scrollableViewNgAfterViewInit = ScrollableView.prototype.ngAfterViewInit;

ScrollableView.prototype.ngAfterViewInit = function() {
  scrollableViewNgAfterViewInit.call(this);

  new ResizeObserver(() => {
    this.alignScrollBar();
  }).observe(this.scrollBodyViewChild.nativeElement);
};

那成功了。

更新（2020 年 6 月 6 日）：

最近，此解决方法的第 2 部分停止工作。我假设发生这种情况是因为 Angular 现在缓存了指向生命周期事件的指针。因此，覆盖它们什么都不做，并且被覆盖的方法不会被触发。

// HACK: automatically re-align table header when resized. Borrowed the idea from https://stackblitz.com/edit/primeng-dynamic-scrollable
const bindEventsOriginal = ScrollableView.prototype.bindEvents;

ScrollableView.prototype.bindEvents = function (): void {
    bindEventsOriginal.call(this);

    new ResizeObserver(() => {
        this.alignScrollBar();
    }).observe(this.scrollBodyViewChild.nativeElement);
};

此外，PrimeNG 版本 9.1.0 添加了 scrollHeight="flex" ，这基本上使此解决方法的第 1 部分变得不必要。

于 2019-01-16T14:07:41.493 回答
0

turboTable 组件有问题。

这两个 hack 解决了这个问题，但它们只在 Chrome 中运行良好。我尝试在 Firefox 和 Edge 中使用它，但两个浏览器都冻结了。我认为这是因为 ResizeObserver 是目前这两个浏览器不支持的功能。

于 2019-04-25T11:21:40.033 回答