如何将 PrimeNg Tree 表中的列组与不可滚动的列结合起来？

Question

我正在使用primeng 7.1.3。

我正在尝试创建的是 scrollable tree table（水平和垂直）：

• 第一个column not scrollable
• 2groups of column不包括第一个

我设法得到这样的东西：StackBlitz code。

开始编辑 ------------------------------------------------- --------------

我找到了解决方法，因此我更新了 Stackblitz 链接以纠正问题。 如果您想查看原始问题，请在 app-component.ts 文件中评论 ngAfterViewInit()。由于上述解决方案，还更新了问题的标签。

编辑结束 ------------------------------------------------- ------------------

据我了解，它将 2 组放在第一列上方 - 而不是留下 empty cell the size of 2 rows - 和其他列应该是这样。

树表文档：PrimeNg Tree Table documentation

• Column group
• Scroll

关于如何解决这个问题的任何提示？

谢谢。

Answer 1

所以我想出了一个解决方案，但它不是很干净。

我没有深入研究 PrimeNg 框架并修改其代码，而是决定使用ngAfterViewInit 并处理生成的 DOM。从这里，我只是寻找不应该在这里的单元格并将它们删除。我还更新了空单元格的高度。

下面是ngAfterViewInit()中用到的函数：

correctDOM(): void {
  function cleanFixedHeader(tagName: string, element: Element): Element {
    const listElementsByTagName = element.getElementsByTagName(tagName);

    if (listElementsByTagName.length === 0) {
      return null;
    }

    for (let i = 0; i < listElementsByTagName.length - 1; i++) {
      element.removeChild(listElementsByTagName[i]);
    }
    return listElementsByTagName[listElementsByTagName.length - 1];
  }

  const treeTableFixedHead: Element = this.elRef.nativeElement
                                  .getElementsByClassName('ui-treetable-frozen-view')[0]
                                  .getElementsByClassName('ui-treetable-thead')[0];

  const treeTableFixedRow = cleanFixedHeader('TR', treeTableFixedHead);
  if (treeTableFixedRow !== null) {
    const treeTableFixedHeaderCell = cleanFixedHeader('TH', treeTableFixedRow);
    treeTableFixedHeaderCell.setAttribute('height', String(treeTableFixedHeaderCell.getBoundingClientRect().height * 2));
  }
}

Stackblitz link，与问题相同。我将编辑所述问题以指示如何查看原始问题。

希望它能对某人有所帮助，因为关于 PrimeNg 的问题似乎并不多。不过，请记住，这个解决方案确实不是一个干净的解决方案。但它为我节省了很多时间，所以......