出现这个问题,是因为设置了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()
}
}
}