如何将p-table的高度设置为窗口高度。

8 浏览
0 Comments

如何将p-table的高度设置为窗口高度。

问题：

我想在angular中设置一个prime p-table的高度。我已经在网上搜索了很多结果，但到目前为止都没有成功（可能是因为这个问题存在很多年，并且对框架的更改禁用了某些解决方案）。

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

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

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

 
  
   
     Date
     ID
     Description
     Value
     Tax
   
  
  
   
     {{entry.date}}
     {{entry.id}}
     {{entry.description}}
     {{entry.value}}
     {{entry.tax}}

以及以下的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设置为p-table内部的一个div（由primeng生成），该div的类为p-datatable-wrapper，会获得样式"max-height: XXXpx"，其中XXX是tableScrollHeight的值。我可能可以编写一个CSS选择器将样式更改为min-width，但这可能不是一个好主意，因为我将不得不从typscript文件中访问dom并搜索自动生成的div。

0