PrimeNG TreeTable级别样式

Question

我已从PrimeNG实施TreeTable。

要求是在可用性视角的级别之间添加虚线。

我尝试了多种方法，但因为它正在生成HTML结构

<table>
  <div>
    <td></td>
  </div>
<table>

我无法找到实施它的正确解决方案。

是否可以使用PrimeNG TreeTable实施？

Answer 1

我有类似的问题。由于我没有从Google挖掘任何东西，因此设法设法解决了这个问题（非常简单！）。我知道这个问题已经问了很长时间了，但是像我一样，其他人也可能会来到这里。尽管这不是直接的答案，但它可以帮助您找出其他方法来实现目标（通过使用样式）。

下面的示例是使用Angular 8和PrimeNG 9截取的我自己的代码。

这是一个动态的TreeTable，仅在有数据要显示时显示，并且在其中我同时检查标题和数据，以进行列调整和我在{{1}中应用的颜色样式}。 getOrderStyle()在这里用于返回标题和字段的名称（这很酷）。

引用Mandalorian，这是这样的方式：

getTable()

该<p-treeTable *ngIf="!isLoading && dataNode.length" [value]="dataNode" [columns]="getTable()"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [ngStyle]="checkHeader(col.header)"> {{ col.header }} </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"> <tr> <td *ngFor="let col of columns; let i = index" [ngClass]="getOrderStyle(rowData)" [ngStyle]="checkField(rowData[col.field])"> <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler> {{ rowData[col.field] }} </td> </tr> </ng-template> </p-treeTable> 行用于显示/隐藏节点。在p-treeTableToggler方法内部，您只需检查参数getOrderStyle(array)的值即可确定要应用于每个（整个）表行的类。

array

好的，好的。这是 getOrderStyle(array) { const col = 'column-name'; // the name of a field column you got from your getTable() if (array[col] === 'B') { return 'order-buy'; } else if (array[col] === 'S') { return 'order-sell'; } } 的示例：

getTable()

让我们使用在这里使用的CSS来完成此示例：

  getTable() {
    return [
      { field: 'code', header: '?' },
      { field: 'qtty', header: '?' },
      { field: 'price', header: '?️' },
      { field: 'total', header: '?' },
      { field: 'time', header: '?' }
    ];
  }

当然，我只使用.order-buy { color: darkgreen; background-color: rgba(200, 255, 200, .8) !important; } .order-sell { color: darkred; background-color: rgba(255, 200, 200, .8) !important; } ，因为没有!important，它就无法工作。您需要强制使用PrimeNG标签的某些样式。

祝你好运（下一个找到这个的人）！ ?