通过指令解决nz-table设置 nzScroll 之后,无论高度是否超过 y ,都会出现滚动条

357 阅读1分钟

来自ng-zorro-antdgithub的issue

出现这个问题,是因为设置了nzScroll.y后,其实是设置了table-body的overflow-y:scroll。

  • 所以解决方案就是通过设置overflow-y:auto
import {
  AfterViewInit,
  OnDestroy,
  Directive,
  ElementRef,
  Input,
} from '@angular/core';

@Directive({
  selector: '[nzTableScroll]',
})
export class NztablescrollDirective implements AfterViewInit, OnDestroy {
  @Input() isObserver: boolean | undefined;
  private observer: ResizeObserver | null = null;
  constructor(private elementRef: ElementRef) {}
  ngAfterViewInit() {
    const element = this.elementRef.nativeElement;
    const headerEl = element.querySelector(
      '.ant-table-container .ant-table-header',
    );
    const bodyEl = element.querySelector(
      '.ant-table-container .ant-table-body',
    );
    if (this.isObserver) {
      this.observer = new ResizeObserver((entries) => {
        for (const entry of entries) {
          this.setScroll(bodyEl, headerEl);
        }
      });
      bodyEl && this.observer.observe(bodyEl);
    } else {
      this.setScroll(bodyEl, headerEl);
    }
  }
  setScroll(bodyEl, headerEl) {
    if (!bodyEl || !headerEl) {
      return;
    }
    if (bodyEl.scrollHeight > bodyEl.clientHeight) {
      (
        headerEl.querySelector('th:last-child') as HTMLElement
      ).style.borderRight = '0';
      headerEl.style.overflow = 'hidden scroll';
      bodyEl.style.overflowY = 'scroll';
    } else {
      headerEl.style.overflowY = 'auto';
      headerEl.style.overflowX = 'hidden';
      bodyEl.style.overflowY = 'auto';
      bodyEl.style.overflowX = 'hidden';
    }
  }
  ngOnDestroy(): void {
    if (this.observer) {
      this.observer?.disconnect();
    }
  }
}