primeng TurboTable (p-таблица) не работает должным образом с scrollHeight = '100%' - PullRequest
Новая
       7

primeng TurboTable (p-таблица) не работает должным образом с scrollHeight = '100%'

0 голосов
/ 15 января 2019

Я хочу, чтобы TurboTable занимал всю высоту родительского элемента (и изменял размер при изменении размера родительского элемента), поэтому прокручивается только содержимое таблицы, и в родительский компонент не добавляются полосы прокрутки.

Я попытался установить scrollHeight = "100%", но это не работает должным образом: https://stackblitz.com/edit/angular-d9narm.

Есть идеи?

ОБНОВЛЕНИЕ: Как исправлено @phucnh, я должен был использовать scrollHeight = "calc (100% - 200px)", чтобы компенсировать заполнение, которое у меня есть. Я теперь обновил свой стек-блиц, чтобы отразить это. Это прекрасно работает при первой загрузке окна, но если вы попытаетесь изменить его высоту, высота таблицы не изменится.

Ответы [ 3 ]

0 голосов
/ 16 января 2019

Итак, после некоторой помощи от @phucnh и некоторого поиска в Google, я смог создать код, который позволяет 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);
};

Это добилось цели.

0 голосов
/ 25 апреля 2019

Проблема с компонентом TurboTable.

Два взлома решают проблему, но они хорошо работают только в Chrome. Я пытался использовать его в Firefox и Edge, и оба браузера зависли. Я думаю, это потому, что ResizeObserver - функция, не поддерживаемая этими двумя браузерами в настоящее время.

0 голосов
/ 15 января 2019

В CSS вы устанавливаете padding: 100px, поэтому вам нужно установить scrollHeight="calc(100% - 200px)"

Если вы хотите обновить высоту при изменении размера, вам нужно обрабатывать больше. Я предлагаю демо здесь

...