So stellen Sie die Höhe des P-Tisches so ein, dass sie mit der Fensterhöhe übereinstimmt

Question

Frage: Ich versuche, die Höhe einer Primzahl-P-Tabelle im Winkel festzulegen. Ich habe viel online gesucht, aber bisher hat nichts funktioniert (wahrscheinlich aufgrund der Tatsache, dass dieses Problem schon seit Jahren besteht und einige Änderungen am Framework einige Lösungen deaktiviert haben).

Ich habe zwei Methoden ausprobiert, die erste ist im Code unten. Die zweite Möglichkeit besteht darin, die Höhe des übergeordneten Divs der P-Tabelle auf innerWindowHeight und die Bildlaufhöhe der P-Tabelle auf Flex festzulegen (funktioniert ebenfalls nicht).

Tools: Angular 14.2.0 und PrimeNG 14.1.1 in einem neuen Projekt

Ich habe den folgenden HTML-Code in app.component.html:

<div>
 <p-table #table
       (window:resize)="onResize()"
       [Wert]="Daten"
       [paginator]="true"
       [showCurrentPageReport]="true"
       [scrollable]="true"
       [scrollHeight]="tableScrollHeight"
       [rows]="10"
       [rowsPerPageOptions]="rowsPerPage"
       styleClass="p-datatable-gridlines p-datatable-striped p-datatable-sm"
       currentPageReportTemplate="{erster} bis {letzter} von {totalRecords} Datensätzen">
  <ng-template pTemplate="header">
   <tr>
     <th>Datum</th>
     <th>ID</th>
     <th>Beschreibung</th>
     <th>value</th>
     <th>Steuern</th>
   </tr>
  </ng-template>
  <ng-template pTemplate="body"
   <tr>
     <td>{{entry.date}}</td>
     <td>{{entry.id}}</td>
     <td>{{entry.description}}</td>
     <td>{{entry.value}}</td>
     <td>{{entry.tax}}</td>
   </tr>
  </ng-template>
 </p-table>
</div>

und das folgende app.component.ts:

import {Component} from '@angular/core';

@Komponente({
  Selektor: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
Klasse AppComponent { exportieren
  title = 'Testapp';
  Daten: any[];
  tableScrollHeight: string = "700px";
  rowsPerPage: number[] = [5, 10, 20, 50];

  Konstrukteur() {
    this.data = [];
    let-Eintrag: any = {};
    enter.description = "Erster Eintrag";
    this.data.push(entry);
  }

  onResize() {
    this.tableScrollHeight = window.innerHeight + 'px';
  }
}

Das Verhalten, das ich erreichen möchte: Ich möchte, dass der Paginator am unteren Rand des Fensters bleibt, unabhängig davon, ob die Tabelle leer ist oder nicht genügend Einträge vorhanden sind, um das Fenster zu füllen, und dass die Tabelle scrollbar ist (Kopfzeile bleibt oben), wenn die Tabellenzeilen größer sind als die Bildschirmgröße.

Um zu verdeutlichen, was ich erreichen möchte, ist hier ein Screenshot, der den aktuellen Status zeigt: Aktueller Status

Hier ist ein Screenshot, wie es aussehen soll: Wie es aussehen sollte

Frage: Gibt es eine Möglichkeit, dies auf saubere Weise zu erreichen?

Wie in den Kommentaren vorgeschlagen, habe ich einen stackblitz hinzugefügt: https://angular-ivy-sfk7pw.stackblitz.io

Herausgeber: Ich habe festgestellt, dass, wenn ich die scrollHeight der Tabelle auf einen div innerhalb der Tabelle (generiert von primeng) mit dem Klassennamen p-datatable-wrapper setze, Get Der Stil „max-height: XXXpx“, wobei XXX der Wert von tableScrollHeight ist. . Ich könnte einen CSS-Selektor schreiben, um den Stil auf „Mindestbreite“ zu ändern, aber das ist wahrscheinlich keine gute Idee, da ich über die Typoskriptdatei auf den Dom zugreifen und nach dem automatisch generierten Div suchen müsste.

Answer 1

也许你可以尝试将这个样式添加到你的 css/scss 中，但这并不是最佳实践。

.p-datatable-wrapper {
  min-height: calc(100vh - 90px);
}

注意： 100vh 是你的屏幕高度，90px 是一个示例的分页高度。

就是这样。希望能对你有所帮助。