Question

我有一个使用角度材质的数据表，我想要一个额外的行，该行包含一些过滤器，如搜索，下拉列表，过滤器。

是否有可能创建第二行???

这是我的示例代码，

<mat-table #table [dataSource]="dataSource" matSort class="mat-tableacc">
          <ng-container matColumnDef="position">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Job ID </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
          </ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

angular-material-data-table

Answer 1

我遇到了同样的问题。

目前，我的解决方案是在我的材料表之前放置一个自定义表;然后通过单击过滤器图标打开一个对话框，在此对话框中我已经放置了所有控件。正确设置列的样式以匹配材料表内下方的宽度和位置非常复杂。

<div class="mock-mat-table">        
        <div class="mock-mat-row">
            <div class="mock-mat-cell">
        <a class="filtro-status" (click)="openFiltersDialog('columnA')">
                    <mat-icon matTooltip="Add Filter">filter_list</mat-icon>
        </a>
            </div>
        <div class="mock-mat-cell">
        <a class="filtro-status" (click)="openFiltersDialog('columnB')">
                    <mat-icon matTooltip="Add Filter">filter_list</mat-icon>
        </a>
            </div>
            <div class="mock-mat-cell">
        <a class="filtro-status" (click)="openFiltersDialog('columnC')">
                    <mat-icon matTooltip="Add Filter">filter_list</mat-icon>
        </a>
            </div>
        .......

        </div>
    </div>

这是相关的CSS，感谢用户 domske 在github...的贡献

.mock-mat-table {
    display: block;
  }

  .mock-mat-row,
  .mock-mat-header-row {
    display: flex;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
  }

  .mock-mat-cell,
  .mock-mat-header-cell {
    flex: 1;
    overflow: hidden;
    word-wrap: break-word;
  }

希望它可以帮助你。

此致

安德烈

如何在角度材料数据表中添加额外的标题和行？

1 个答案: