angular - 带有粘性和自定义宽度列的角材料表

Question

我需要一个可以通过列的粘性和宽度自定义的表格。到目前为止，如果我在th和td上放置一个宽度为 150px的自定义类，我发现了一些东西，当我水平滚动时，sticky 属性不知道如何正确计算style.left。

但是例如，如果我在 CSS 中覆盖类.mat-h​​eader-cell、.mat-footer-cell、.mat-cell宽度为：150px，sticky 属性知道如何管理它并正确放置 style.left 。

CSS：

.table-responsive {
    height: 400px;
    width: 800px;
    overflow: auto;
}

table {
    width: 1000px;
}

.mat-header-cell, .mat-footer-cell, .mat-cell {
    box-sizing: border-box;
    text-align: center;
    width: 150px;
}

.mat-header-row {
    width: 100%;
}

HTML：

<div dir="ltr" class="table-responsive mat-elevation-z8">
    <table mat-table #table [dataSource]="dataSource" matSort >
      <ng-container *ngFor="let col of displayedColumns">

        <ng-container *ngIf="col.type === 'masterCheckbox'" [matColumnDef]="col.value"
                        [sticky]="col.sticky">
          <th mat-header-cell *matHeaderCellDef [style.width]="col.width" [fxFlex]="col.width">
            <mat-checkbox (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let row" [style.width]="col.width" [fxFlex]="col.width">
            <span class="header-label"></span>
            <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event? selection.toggle(row) : null"
                            [checked]="selection.isSelected(row)">
            </mat-checkbox>
          </td>
        </ng-container>


        <ng-container *ngIf="col.type === 'text'" [matColumnDef]="col.value" [sticky]="col.sticky">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <div>{{row[col.value]}}</div>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'toggle'" [matColumnDef]="col.value" [sticky]="col.sticky">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <mat-slide-toggle [checked]="row[col.value]"></mat-slide-toggle>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'checkbox'" [matColumnDef]="col.value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <span class="header-label"></span>
              <mat-checkbox [checked]="row[col.value]"></mat-checkbox>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'percentage'" [matColumnDef]="col.value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
                {{row[col.value]}}%
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'link'" [matColumnDef]="col.value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <button> CLICK </button>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'actions'" [matColumnDef]="col.value" stickyEnd>
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <button mat-icon-button [matMenuTriggerFor]="menu">
              <mat-icon class="actionBtn">add_circle</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
              <ng-container *ngFor="let action of singleSelectionActions">
                <app-single-selection-actions
                    (actionEvent)="doAction($event)"
                    [selectedRow]="row"
                    [singleSelectionAction]="action">
                </app-single-selection-actions>
              </ng-container>
            </mat-menu>
          </td>
        </ng-container>

      </ng-container>
      <mat-header-row *matHeaderRowDef="columnDefinitions"></mat-header-row>
      <mat-row *matRowDef="let row; columns: columnDefinitions"></mat-row>
    </table>
    <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
  </div>

标签： angularangular-materialmaterial-designstickycustomcolumn

Answer 1

如果你把 fxFlex 和一个有 min-width 的类放进去，它就可以工作

.min-width-100 {
  min-width: 100px !important;
}

<th mat-header-cell *matHeaderCellDef mat-sort-header [fxFlex]="col.width"
                    class="min-width-100">
 {{ 'TABLE.COLUMN.' + col.name | translate }}
</th>
<td mat-cell *matCellDef="let row" [fxFlex]="col.width" class="min-width-100 d-flex d-j-c-flex-end">
  <div fxLayout="column" fxLayoutAlign="space-between start">
    {{row[col.value]}}%
    <div fxLayout="row" fxLayoutAlign="space-between end">
       <app-column-actions 
         (actionEvent)="doAction($event)" 
         [row]="row"
         [actions]="col.actions">
       </app-column-actions>
    </div>
  </div>
</td>