延迟加载期间，加载主体不包含父元素

Question

我正在实现一个表组件，该组件应该能够接受任何具有冻结的行，列，标题或根本没有冻结的表。我还希望组件使用滚动上的延迟加载来加载数据。当滚动加载数据时，将使用加载主体元素来掩盖数据的加载。问题在于，当有水平滚动条时，加载主体不会包含正在加载的数据的全部。它仅占用视口的空间，因此，当您水平滚动然后垂直滚动时，您可以看到加载主体后面的数据，并且看起来很糟糕。

我尝试使用css将加载主体的宽度设置为100％和100vw，但如果冻结列的数量不同，则这些选项将不起作用。根据列的不同，它们可能会变得太长或太短。

这是我尝试用于加载主体的css。

.ui-table-loading-virtual-table { width: 100% !important; }

这是我用来制作表格的HTML

`
<div *ngIf="!isLoading; else loadingBlock">
  <div class = "p-grid">
<div class = "p-col-12">
  <p-table class="p-table" 
           [columns]="columns" 
           [value]="virtualRow" 
           [scrollable]="true" 
           [scrollHeight]= "maxHeight"
           frozenWidth={{frozenColWidth}}  
           (contextmenu)="getContextMenu($event, cm)"
           [frozenColumns]= "frozenCols" 
           [frozenValue]="frozenRows" 
           [rows]= "this.rows"
           selectionMode="single"
           (onContextMenuSelect)='getContextMenu($event.node, cm)'
           [totalRecords]="totalRecords"
           [virtualScroll]="true"
           [virtualRowHeight]="35.67"
           [lazy]="true"
           (onLazyLoad)="getData($event)"
           [showLoader] = "false">
      <ng-template pTemplate="colgroup"
                   let-columns
                   class="column-group">
        <colgroup>
         <col *ngFor="let col of columns"
              [style.width]="colWidth"
              class="col">
         </colgroup>
      </ng-template>
      <ng-template pTemplate="header"
                   let-columns >
        <tr>
          <th *ngFor="let col of columns" >
            {{ col.header }}
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="frozenrows"
                   let-rowData 
                   let-columns="columns">
        <tr [pContextMenuRow]="rowData"
            (dblclick) = "executeDefaultAction()"
            (click) = "updateSelectedRow(rowData)"
            (contextmenu) = 'updateSelectedRow(rowData)'
            (mouseenter)="onMouseEnter(rowData)" 
            (mouseleave)="onMouseLeave(rowData)"
            [class.row-hover]="rowData.hover">
          <td *ngFor= "let col of columns">
            {{ rowData[col.field] }}
          </td>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" 
                   let-rowData
                   let-columns="columns"
                    >
        <tr style="height:35.67px"
            [pContextMenuRow]="rowData"
            (dblclick) = "executeDefaultAction()"
            (click) = "updateSelectedRow(rowData)"
            (contextmenu) = 'updateSelectedRow(rowData)'
            (mouseenter)="onMouseEnter(rowData)" 
            (mouseleave)="onMouseLeave(rowData)"
            [class.row-hover]="rowData.hover"
            >
          <td *ngFor= "let col of columns"
              >
            {{ rowData[col.field] }}
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="loadingbody"
                   let-columns="columns">
        <tr style="height:35.67px">
            <td *ngFor="let col of columns">
                <div class="loading-text"></div>
            </td>
        </tr>
    </ng-template>
  </p-table>

这是用于加载数据的打字稿功能。

blic loadChunk( length: number ) {
this.tableService.getData(this.tableUrl).subscribe((rows: Row[]) => {
  // applies rows from table service to component arrays (frozen and otherwise)
  const filteredRows = [];
  const frozenRows = [];
  rows.forEach((row) => {
    if (row.frozen) { frozenRows.push(row); } else { filteredRows.push(row); }
  });
  this.virtualRow = filteredRows.slice(0, this.virtualRow.length + length);
  this.frozenRows = frozenRows;
  const chunk = this.virtualRow.length;

  return chunk;
}, (err) => {
  this.isLoading = true;
  this.messageService.add({ severity: 'error', summary: 'Service Message', detail: err.statusText });
});

}

public getInitialData() {
this.messageService.clear();
this.isLoading = true;
this.tableService.getInitialData(this.initialTableUrl).subscribe((columns: Column[]) => {
  // applies columns from table service to component arrays
  const filteredCols = [];
  const frozenCols = [];
  columns.forEach((col) => {
    if (col.frozen) { frozenCols.push(col); } else { filteredCols.push(col); }
  });
  this.columns = filteredCols;
  this.frozenCols = frozenCols;
  // this.numberCols = +this.maxWidth.substring(0, this.maxWidth.length - 2) - ((+this.colWidth.substring(0,
  this.frozenCols.length;
  const widthString = widthTobe.toString();
  this.frozenColWidth =  widthString + this.colWidth.substr(this.colWidth.length - 2, this.colWidth.length);
  this.isLoading = false;
}, (err) => {
  this.isLoading = false;
  this.messageService.add({ severity: 'error', summary: 'Service Message', detail: err.statusText });
});

}

我希望加载主体能够容纳正在加载的所有数据，但是它仅涵盖表格在进行任何水平滚动之前最初显示的内容。