目录
一、ResizeObserver方法
二、使用ResizeObserver结合表格虚拟滚动
一、ResizeObserver方法
ResizeObserver接口监视Element内容盒或边框盒或者SVGElement边界尺寸的变化。
二、使用ResizeObserver结合表格虚拟滚动
<nz-table#basicTable[nzData]="obj.list"[nzScroll]="obj.scroll"nzSize="small"nzBorderednzShowPagination="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 => {puteTableScrollX();});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;//赋值给表格的虚拟滚动的ythis.obj.scroll.y = `${y}px`;this.obj.scroll = { ...this.obj.scroll };//对变更进行检测 以便渲染this.cdr.detectChanges();}}
这是其中一个方法，我们也可以使用模板变量在table组件的父元素div上，然后使用viewchild获取此时获取到的是dom元素 直接获取dom元素的nativeElement属性
