如何将p-table的高度调整为与窗口高度相同
P粉132730839
P粉132730839 2023-08-25 12:06:40
[CSS3讨论组]

问题: 我正在尝试在angular中设置一个prime p-table的高度。我已经在网上搜索了很多结果,但到目前为止都没有起作用(可能是由于这个问题存在多年,并且对框架进行了一些更改,禁用了某些解决方案)。

我已经尝试了两种方法,第一种方法在下面的代码中。第二种方法是将p-table的父div的高度设置为innerWindowHeight,并将p-table的scrollheight设置为flex(也不起作用)。

工具:Angular 14.2.0和PrimeNG 14.1.1在一个新项目中

我在app.component.html中有以下html代码:

<div>
 <p-table #table
       (window:resize)="onResize()"
       [value]="data"
       [paginator]="true"
       [showCurrentPageReport]="true"
       [scrollable]="true"
       [scrollHeight]="tableScrollHeight"
       [rows]="10"
       [rowsPerPageOptions]="rowsPerPage"
       styleClass="p-datatable-gridlines p-datatable-striped p-datatable-sm"
       currentPageReportTemplate="{first} to {last} of {totalRecords} records">
  <ng-template pTemplate="header">
   <tr>
     <th>日期</th>
     <th>ID</th>
     <th>描述</th>
     <th>值</th>
     <th>税</th>
   </tr>
  </ng-template>
  <ng-template pTemplate="body" let-entry>
   <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>

以及以下的app.component.ts

import {Component} from '@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 是一个示例的分页高度。

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号