Bagaimana untuk melaraskan ketinggian p-table supaya sama dengan ketinggian tingkap

Question

Soalan: Saya cuba menetapkan ketinggian jadual p utama dalam sudut. Saya telah banyak mencari dalam talian tetapi tiada apa yang berjaya setakat ini (mungkin disebabkan masalah ini telah wujud selama bertahun-tahun dan beberapa perubahan pada rangka kerja telah melumpuhkan beberapa penyelesaian).

Saya telah mencuba dua kaedah, yang pertama adalah dalam kod di bawah. Cara kedua ialah untuk menetapkan ketinggian div induk p-table kepada innerWindowHeight dan ketinggian tatal p-table kepada flex (juga tidak berfungsi).

Alat: Angular 14.2.0 dan PrimeNG 14.1.1 dalam projek baharu

Saya mempunyai kod html berikut dalam app.component.html:

<div>
 <p-jadual #jadual
       (window:resize)="onResize()"
       [nilai]="data"
       [halaman halaman]="benar"
       [showCurrentPageReport]="benar"
       [boleh ditatal]="benar"
       [scrollHeight]="tableScrollHeight"
       [baris]="10"
       [rowsPerPageOptions]="rowsPerPage"
       styleClass="p-datatable-gridlines p-datatable-jalur p-datatable-sm"
       currentPageReportTemplate="{first} hingga {last} daripada {totalRecords} rekod">
  <ng-template pTemplate="header">
   <tr>
     <th>Tarikh</th>
     <th>ID</th>
     <th>Penerangan</th>
     <th>value</th>
     <th>Cukai</th>
   </tr>
  </ng-template>
  <ng-template pTemplate="badan"
   <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></pra>
<p>dan yang berikut <strong>app.component.ts</strong>: </p>
<pre class="brush:php;toolbar:false;">import {Component} daripada '@angular/core';

@Komponen({
  pemilih: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
kelas eksport AppComponent {
  tajuk = 'Testapp';
  data: mana-mana[];
  tableScrollHeight: rentetan = "700px";
  rowsPerPage: number[] = [5, 10, 20, 50];

  pembina() {
    ini.data = [];
    biarkan entri: sebarang = {};
    entry.description = "Entri pertama";
    this.data.push(entry);
  }

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

Tingkah laku yang saya ingin capai: Saya mahu penomboran kekal di bahagian bawah tetingkap tanpa mengira sama ada jadual kosong atau tiada entri yang mencukupi untuk mengisi tetingkap dan jadual boleh ditatal (pengepala kekal di atas) apabila baris jadual lebih besar daripada saiz skrin.

Untuk menjelaskan perkara yang saya cuba capai, berikut ialah tangkapan skrin yang menunjukkan keadaan semasanya: Status semasa

Berikut ialah tangkapan skrin bagaimana saya mahu ia kelihatan: Bagaimana ia sepatutnya kelihatan

Soalan: Adakah terdapat cara untuk mencapai ini dengan cara yang bersih?

Seperti yang dicadangkan dalam ulasan, saya telah menambah stackblitz: https://angular-ivy-sfk7pw.stackblitz.io

Editor: Saya mendapati bahawa jika saya menetapkan scrollHeight jadual kepada div di dalam jadual (dijana oleh primeng) dengan nama kelas p-datatable-wrapper, ia akan Mendapat gaya "max-height: XXXpx", dengan XXX ialah nilai tableScrollHeight . Saya boleh menulis pemilih CSS untuk menukar gaya kepada lebar min, tetapi itu mungkin bukan idea yang baik kerana saya perlu mengakses dom daripada fail typscript dan mencari div yang dijana secara automatik.

Answer 1

Mungkin anda boleh cuba menambah gaya ini pada css/scss anda, tetapi itu bukan amalan terbaik.

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

Nota: 100vh 是你的屏幕高度，90px ialah contoh ketinggian penomboran.

Itu sahaja. semoga ia dapat membantu anda.