Angular使用ResizeObserver结合ng-zorro表格组件

目录

一、ResizeObserver方法

二、使用ResizeObserver结合表格虚拟滚动

一、ResizeObserver方法

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

二、使用ResizeObserver结合表格虚拟滚动

                    <nz-table
                        #basicTable
                        [nzData]="obj.list"
                        [nzScroll]="obj.scroll"
                        nzSize="small"
                        nzBordered
                        nzShowPagination="false"
                    >
                        <thead>
                            <tr>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of basicTable.data; let i = index" >
                            </tr>
                        </tbody>
                    </nz-table>

通过viewchild获取表格组件 注意此时获取的是组件table,如果要获取其dom元素需要访问basicTable.elementRef.nativeElement

 @ViewChild('basicTable') basicTable: any;

  ngAfterViewInit(): void {
        const objResizeObserver = new ResizeObserver(entries => {
            this.computeTableScrollX();
        });
        if (this.basicTable.elementRef) {
            // 观察文本域元素
            objResizeObserver.observe(this.basicTable.elementRef.nativeElement);
        }
    }
    computeTableScrollX() {
        if (this.basicTable) {
            //拿到表格的dom元素
            const tableElement = this.basicTable.elementRef.nativeElement;
            //获取表头
            const thead = tableElement.querySelector('thead');
            //获取表格的父元素
            const parentElement = tableElement.parentElement;
            //父节点的高度-表头的高度 为表身的高度
            const y = parentElement.offsetHeight - thead.offsetHeight;
            //赋值给表格的虚拟滚动的y
            this.obj.scroll.y = `${y}px`;
            this.obj.scroll = { ...this.obj.scroll };
            //对变更进行检测 以便渲染
            this.cdr.detectChanges();
        }
    }

这是其中一个方法，我们也可以使用模板变量在table组件的父元素div上，然后使用viewchild获取此时获取到的是dom元素 直接获取dom元素的nativeElement属性