如何將p-table的高度調整為與視窗高度相同
P粉132730839
P粉132730839 2023-08-25 12:06:40
0
1
501

問題: 我正在嘗試在angular中設定一個prime p-table的高度。我已經在網上搜索了很多結果,但到目前為止都沒有起作用(可能是由於這個問題存在多年,並且對框架進行了一些更改,禁用了某些解決方案)。

我已經嘗試了兩種方法,第一種方法在下面的程式碼中。第二種方法是將p-table的父div的高度設定為innerWindowHeight,並將p-table的scrollheight設定為flex(也不行)。

工具:Angular 14.2.0與PrimeNG 14.1.1在一個新專案

我在app.component.html有以下html代碼:

日期 ID 描述 值 稅 {{entry.date}} {{entry.id}} {{entry.description}} {{entry.value}} {{entry.tax}}

以及以下的app.component.ts

import {Component} 從 '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Testapp'; data: any[]; tableScrollHeight: string = "700px"; rowsPerPage: number[] = [5, 10, 20, 50]; constructor() { this.data = []; let entry: any = {}; entry.description = "First entry"; this.data.push(entry); } onResize() { this.tableScrollHeight = window.innerHeight 'px'; } }

我想要實現的行為: 我希望無論表格是否為空或沒有足夠的條目來填充窗口,分頁器都保持在窗口底部,並且當表格行大於螢幕大小時,表格可以滾動(頭部保持在頂部)。

為了澄清我想要實現的目標,這裡有一個截圖展示它的當前狀態: 目前狀態

這裡有一個截圖展示我希望它看起來的樣子: 應該的樣子

問題: 有沒有辦法以乾淨的方式達成這個目標?

如評論中建議的那樣,我添加了一個stackblitz:https://angular-ivy-sfk7pw.stackblitz.io

編: 我發現如果將table的scrollHeight設定為表格內部的一個div(由primeng產生),該div的類別名稱為p-datatable-wrapper,它會取得樣式"max-height: XXXpx",其中XXXtableScrollHeight的值 。我可以寫一個CSS選擇器將樣式更改為min-width,但這可能不是一個好主意,因為我將不得不從typscript文件中訪問dom並蒐索自動生成的div。

P粉132730839
P粉132730839

全部回覆 (1)
P粉529581199

也許你可以嘗試將這個樣式加入你的css/scss中,但這不是最佳實踐。

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

注意:100vh是你的螢幕高度,90px是一個範例的分頁高度。

就是這樣。希望能對你有幫助。

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!