Question

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

我尝试设置scrollHeight =“ 100％”，但这不能正常工作：https://stackblitz.com/edit/angular-d9narm。

有什么想法吗？

更新：正如@phucnh更正的那样，我应该使用scrollHeight =“ calc（100％-200px）”来补偿我的填充。我现在更新了我的堆叠闪电战以反映这一点。刚开始加载窗口时，这种方法非常完美，但是如果您尝试更改其高度，则桌子的高度不会改变。

Answer 1

在CSS中，您设置了padding: 100px，因此需要设置scrollHeight="calc(100% - 200px)"

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

Answer 2

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

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

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

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

In[115]:

d = {}
i = 0
for p in pos:
    if p == pos[0]:
        d[p] = newFile.loc[:pos[i+1]-1].append(pd.Series('',newFile.columns), ignore_index=True)
    elif (i + 1) > len(pos) - 1:
        d[p] = newFile.loc[pos[i-1]+1:]
    else:
        d[p] = newFile.loc[p:pos[i+1]-1].append(pd.Series('',newFile.columns), ignore_index=True)
    i = i + 1
pd.concat(d, ignore_index=True)
Out[115]: 
                                     項目      金額 数量 単位   単価
0                        プレサンス ロジェ 和泉中央                   
1      Yahoo!リスティング 12月分 12/1〜12/31 YSS   91188  1  式  NaN
2        Yahoo!リマーケティング 12月分 12/1〜12/31   25649  1  式  NaN
3    Yahoo!ディスプレイネットワーク 12月分 12/1〜12/31   13211  1  式  NaN
4          Googleリスティング 12月分 12/1〜12/31  131742  1  式  NaN
5        Googleリマーケティング 12月分 12/1〜12/31   35479  1  式  NaN
6    Googleディスプレイネットワーク 12月分 12/1〜12/31   18999  1  式  NaN
7                                                         
8                          プレサンス グラン 茨木                   
9      Yahoo!リスティング 12月分 12/1〜12/31 YSS  113373  1  式  NaN
10       Yahoo!リマーケティング 12月分 12/1〜12/31   28775  1  式  NaN
11   Yahoo!ディスプレイネットワーク 12月分 12/1〜12/31   19010  1  式  NaN
12         Googleリスティング 12月分 12/1〜12/31  158389  1  式  NaN
13       Googleリマーケティング 12月分 12/1〜12/31   45530  1  式  NaN
14   Googleディスプレイネットワーク 12月分 12/1〜12/31   23224  1  式  NaN
15                                                        
16     Yahoo!リスティング 12月分 12/1〜12/31 YSS  113373  1  式  NaN
17       Yahoo!リマーケティング 12月分 12/1〜12/31   28775  1  式  NaN
18   Yahoo!ディスプレイネットワーク 12月分 12/1〜12/31   19010  1  式  NaN
19         Googleリスティング 12月分 12/1〜12/31  158389  1  式  NaN
20       Googleリマーケティング 12月分 12/1〜12/31   45530  1  式  NaN
21   Googleディスプレイネットワーク 12月分 12/1〜12/31   23224  1  式  NaN
22                         プレサンス ロジェ 江坂

2）为了解决滚动条出现/消失时标题单元格未对准的问题，我们需要进行一些肮脏的黑客攻击（受https://stackblitz.com/edit/primeng-dynamic-scrollable的启发）：

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 += ' ';
    }
}

做到了。

Answer 3

turboTable组件有问题。

这两个技巧可以解决问题，但它们只能在Chrome中正常运行。我试图在Firefox和Edge中使用它，并且两个浏览器都冻结了。我认为这是因为ResizeObserver是目前这两个浏览器不支持的功能。

primeScroll TurboTable（p表）在scrollHeight ='100％'下无法正常工作

3 个答案: