PrimeNG v10.0.0，当 [responsive]='true' 且网格响应时，p-table 页脚消失

Question

我正在构建一个周费用报告组件。报告应该是响应式的，所以我在正文中有详细信息，在页脚中有列总数。

我在 Angular 10 应用程序中使用 PrimeNG 库。这是一个 PrimeNG CSS 问题。费用报表通常显示页眉、正文和页脚。当支出报告响应时，它只显示正文。这似乎是由 Primefaces 根据以下 table.css 文件设计的：

@media screen and (max-width: 40em) {
  .p-datatable.p-datatable-responsive .p-datatable-thead > tr > th,
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
    display: none !important;
  }
  ...

我正在尝试让页脚显示，但一直没有成功。当我查看 Chrome 开发人员工具时，我看到上面的 table.css 已经覆盖了我在以下应用程序 [=49 中的 CSS =] 文件：

@media screen and (max-width: 40em) {
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
    text-align: left;
    display: block;
    width: 100%;
    float: left;
    clear: left;
    border: 0 none;
  }
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td .p-column-title {
    padding: .4rem;
    min-width: 30%;
    display: inline-block;
    margin: -.4em 1em -.4em -.4rem;
    font-weight: bold;
  }
}

我基本上从 table.css 中取出上面的 CSS 并将其更改为 tfoot 而不是 tbody。我在 Chrome 开发者工具中看到上面的 CSS 在 table.css 的 CSS 下面，但是 显示：块； 行有删除线。

我的 CSS 在 angular.json 文件中设置如下：

angular.json
  "build": {
    ...,
      "styles": [
        "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
        "node_modules/primeng/resources/themes/nova/theme.css",
        "node_modules/primeng/resources/primeng.min.css",
        "node_modules/primeicons/primeicons.css",
        "src/styles.css"
      ],

以下是演示该问题的示例组件。

<p-table id='weekTotals-grid' [value]='items'  dataKey='ExpenseTypeId' [responsive]='true'>
  <ng-template pTemplate='header'>
    <tr>
      <th style='width: 170px;'></th>
      <th><div style='width: 100px;'>Total</div></th>
    </tr>
  </ng-template>
  <ng-template pTemplate='body' let-rowData>
    <tr>
      <td>
        <span class='p-column-title'>Expense Type</span>
        {{ rowData['ExpenseType'] }}
      </td>
      <td>
        <span class='p-column-title'>Total</span>
        <div style='width: 80px;' class='nsg-wet-numeric'>
          {{ rowData['ExpenseTotal'] }}
        </div>
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate='footer' style='border-top: 1px solid black;'>
    <tr>
      <td>Totals</td>
      <td>
        <span class='p-column-title'>Grand Total</span>
          {{ grandTotal }}
      </td>
    </tr>
  </ng-template>
</p-table>

打字稿代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  items: any[];
  grandTotal: number;
  ngOnInit() {
    this.items = [
      {ExpenseTypeId: 1, ExpenseType: 'Gas', ExpenseTotal: 20.0},
      {ExpenseTypeId: 2, ExpenseType: 'Food', ExpenseTotal: 12.88},
      {ExpenseTypeId: 3, ExpenseType: 'Mileage', ExpenseTotal: 5.50}
      ];
    this.grandTotal = 38.38;
  }
}

谢谢

Answer 1

我尝试了 root: ng-deep::，但我无法让它工作。因此，我了解了 StackBlitz 示例的工作原理，而不是使用 [responsive]='true'，而是使用 class，如下所示：

/* Responsive styleClass='p-datatable-responsive-footer' */
.p-datatable-responsive-footer .p-datatable-tbody > tr > td .p-column-title,
.p-datatable-responsive-footer .p-datatable-tfoot > tr > td .p-column-title {
    display: none;
}

@media screen and (max-width: 40em) {
    .p-datatable-responsive-footer .p-datatable-thead > tr > th {
        display: none !important;
    }
    .p-datatable-responsive-footer .p-datatable-tbody > tr > td,
    .p-datatable-responsive-footer .p-datatable-tfoot > tr > td {
        text-align: left;
        display: block;
        width: 100%;
        float: left;
        clear: left;
        border: 0 none;
    }
    .p-datatable-responsive-footer .p-datatable-tbody > tr > td .p-column-title,
    .p-datatable-responsive-footer .p-datatable-tfoot > tr > td .p-column-title {
        padding: .4rem;
        min-width: 30%;
        display: inline-block;
        margin: -.4em 1em -.4em -.4rem;
        font-weight: bold;
    }
}

我将以上内容放在应用程序 style.css 文件中。我认为这个解决方案有一些变化可以用于任何 HTML table。确保使用大写 C (styleClass)。

<p-table id='weekTotals-grid' [value]='items' dataKey='ExpenseTypeId' styleClass='p-datatable-responsive-footer'>
  ...
</p-table>

PrimeNG v10.0.0，当 [responsive]='true' 且网格响应时，p-table 页脚消失

PrimeNG v10.0.0, p-table footer disappears when [responsive]='true' and grid is responsive

css

datatables

primeng

angular