mat-table 是 Angular Material 中的一个组件,用于展示表格数据。要更新 mat-table 的列宽,可以通过设置列的 flex 属性来实现。
具体步骤如下:
<mat-table [dataSource]="dataSource">
<!-- 定义表头 -->
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef>列1</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.column1}} </mat-cell>
</ng-container>
<!-- 定义表体 -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
displayedColumns: string[] = ['column1'];
dataSource = [
{ column1: '数据1' },
{ column1: '数据2' },
{ column1: '数据3' }
];
}
.mat-column-column1 {
flex: 1;
}
在上述代码中,.mat-column-column1
是列的 CSS 类名,flex: 1
表示该列的宽度占据剩余空间的比例为 1。可以根据需要调整该比例来改变列的宽度。
这样,当 mat-table 渲染时,列的宽度会根据设置的 flex 属性进行自动调整。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云