问题: 我正在尝试在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} 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",其中XXX是tableScrollHeight的值。我可以写一个CSS选择器将样式更改为min-width,但这可能不是一个好主意,因为我将不得不从typscript文件中访问dom并搜索自动生成的div。
也许你可以尝试将这个样式添加到你的
css/scss
中,但这并不是最佳实践。注意:
100vh
是你的屏幕高度,90px
是一个示例的分页高度。就是这样。希望能对你有所帮助。