在列配置中设置 Angular Material mat-table 列宽

Question

我的 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',
        position: 'left',
        width: '100%'
    }
];

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

Answer 1

虽然无法在数组中定义列宽，但您应该可以使用 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 完成，因此也应该以相同的方式工作。

Answer 2

一般来说，您定义了基于数组的列，例如：

<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>

并且您显示的列为

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

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

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

Update 假设您想创建一个带有操作按钮的列，但是这个按钮可以是一个、两个或三个。我们可以为最后一列分配宽度“1%”和 'white-space: 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%

我们可以尝试使用 flex-mode

中的 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>

看到“动作”列“头部”重复按钮 - 与 visibility:hidden-

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

在列配置中设置 Angular Material mat-table 列宽

Setting Angular Material mat-table column width in column configuration

html

css

angular

angular-material

angular-material-table