Как объединить группы столбцов в таблице PrimeNg Tree с не прокручиваемым столбцом?

Question

Я использую primeng 7.1.3.

Я пытаюсь создать scrollable tree table (по горизонтали и вертикали) с:

• 1-й column not scrollable
• 2 groups of column за исключением 1-го

Мне удалось получить что-то вроде этого: Код StackBlitz .

Begin of Edit --------------------------------------------- ------

Я нашел способ, поэтому обновил ссылку на Stackblitz, чтобы исправить проблему. Если вы хотите увидеть исходную проблему , прокомментируйте ngAfterViewInit() в файле app-component.ts. Также обновлены теги вопроса из-за указанного решения.

Конец редактирования ------------------ -------------------------------------

Из того, что я понимаю, он ставит 2 группы над первым столбцом - вместо того, чтобы оставлять empty cell the size of 2 rows - и другие столбцы в порядке.

Документация для таблиц дерева: Документация таблицы дерева PrimeNg

• Группа столбцов
• Прокрутка

Любой намек на то, как решить эту проблему?

Спасибо.

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 , такая же, как в вопросе. Я отредактирую указанный вопрос, чтобы указать, как просмотреть исходную проблему.

Надеюсь, это кому-нибудь поможет, так как кажется, что многие вопросы о PrimeNg не задаются. Тем не менее, имейте в виду, что это решение действительно не является чистым . Но это сэкономило мне много времени, так что ...