Bagaimana untuk melaraskan ketinggian p-table supaya sama dengan ketinggian tingkap
<p><strong>Soalan: </strong>
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). </p>
<p>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). </p>
<p><strong>Alat: </strong>Angular 14.2.0 dan PrimeNG 14.1.1 dalam projek baharu</p>
<p>Saya mempunyai kod html berikut dalam <strong>app.component.html</strong>: </p>
<pre class="brush:php;toolbar:false;"><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';
}
}</pre>
<p><strong>Tingkah laku yang saya ingin capai: </strong>
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. </p>
<p>Untuk menjelaskan perkara yang saya cuba capai, berikut ialah tangkapan skrin yang menunjukkan keadaan semasanya:
Status semasa</p>
<p>Berikut ialah tangkapan skrin bagaimana saya mahu ia kelihatan:
Bagaimana ia sepatutnya kelihatan</p>
<p><strong>Soalan: </strong>
Adakah terdapat cara untuk mencapai ini dengan cara yang bersih? </p>
<p>Seperti yang dicadangkan dalam ulasan, saya telah menambah <strong>stackblitz</strong>: https://angular-ivy-sfk7pw.stackblitz.io</p>
<p><strong>Editor: </strong>
Saya mendapati bahawa jika saya menetapkan scrollHeight jadual kepada <strong>div</strong> di dalam jadual (dijana oleh primeng) dengan nama kelas <strong>p-datatable-wrapper</strong>, ia akan Mendapat gaya "<strong>max-height</strong>: <strong>XXX</strong>px", dengan <strong>XXX</strong> ialah nilai <strong>tableScrollHeight</strong> . 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. </p>
