在列配置中设置Angular Material垫表列宽

如何解决在列配置中设置Angular Material垫表列宽

我的Angular Material mat-table列具有以下列配置：

export interface TableColumn {
  name: string;
  dataKey: string;
  isSortable?: boolean;
  width?: string; // column width
}

//...

this.tableColumns = [
    {
        name: 'Id',dataKey: 'id',position: 'left',width: '50px'
    },{
        name: 'Name',dataKey: 'name',width: '100%'
    }
];

据我所知，许多人使用css来设置this页面上的列宽，依此类推。但是，如果我们按像素和百分比来设置每列的列宽不是很好定义列时在this.tableColumns数组中作为其他属性？我想我只需要配置mat-table，但是不确定mat-table是否有这样的配置。如果没有，我想我可以使用[style.width]并按列配置值设置每列。有什么建议吗？

解决方法

通常，您基于数组定义列，例如：

<ng-container *ngFor="let column of tableColumns;let first=first">
        <ng-container [matColumnDef]="column.dataKey">
            <th [style.width]="column.width" mat-header-cell *matHeaderCellDef>
                  {{column.name}}
            </th>
            <td [style.width]="column.width" mat-cell 
                 *matCellDef="let element"> {{element[column.dataKey]}}
            </td>
        </ng-container>
</ng-container>

您的displayColumns为

this.displayedColumns=this.tableColumns.map(x=>x.dataKey)

注意：我假设您将宽度定义为“ 50％”或“ 30px”（如果仅使用可以使用的数字），例如

[style.width]="column.width+'px'"

更新假设您想创建带有操作按钮的列，但是该按钮可以是一个，两个或三个。我们可以将最后一个列的宽度指定为“ 1％”和“空白：nowrap”

//we has two variables
btDelete:boolean=true;
btEdit:boolean:true;

<ng-container matColumnDef="action">
    <th style="width:1%" mat-header-cell *matHeaderCellDef>
    </th>
    <td style="width:1%;white-space: nowrap;" mat-cell 
         *matCellDef="let element">
        <button *ngIf="btEdit" mat-button (click)="edit(element)">Edit</button>
        <button *ngIf="btDelete" mat-button (click)="delete(element)">Delete</button> 
    </td>
</ng-container>

注意：我不太确定列宽会发生什么，因为百分比总数大于100％

我们可以尝试在弹性模式下使用mat-table

<ng-container *ngFor="let column of columns">
    <ng-container [matColumnDef]="column.name">
        <mat-header-cell [style.flex]="column.width" *matHeaderCellDef> {{column.width}}</mat-header-cell>
        <mat-cell [style.flex]="column.width" *matCellDef="let element"> {{element[column.name]}} </mat-cell>
    </ng-container>
</ng-container>
<ng-container matColumnDef="action">
    <mat-header-cell style="flex:0 1 auto;visibility:hidden" *matHeaderCellDef>
        <button *ngIf="btEdit" mat-button>Delete</button>
        <button *ngIf="btDelete" mat-button>Delete</button>
    </mat-header-cell>
    <mat-cell style="flex:0 1 auto" *matCellDef="let element"> <button *ngIf="btEdit" mat-button>Edit</button>
        <button *ngIf="btDelete" mat-button>Delete</button></mat-cell>
</ng-container>

看到“动作”一栏“头部”重复按钮-具有可见性：隐藏-

注意：在这种情况下，“ with”（实际上是flex-）是一个数字，而不是％，

,

虽然无法定义数组中的列宽，但是您应该可以使用ng-style定义它。可以在html模板中提供列特定的属性，因此这也应该起作用。一个例子是

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <mat-text-column name="position" [headerText]="headerText" [ngStyle]="{'width':'20%'}"></mat-text-column>

  <!-- Change the header text. -->
  <mat-text-column name="name" headerText="Element" [ngStyle]="{'width':'40%'}"></mat-text-column>

  <!-- Provide a data accessor for getting the cell text values. -->
  <mat-text-column name="weight" [dataAccessor]="getWeight" [ngStyle]="{'width':'40%'}"></mat-text-column>
</table>

style.width的结果也可以由ngStyle完成，因此也应以相同的方式工作。