angular material表格内容自动折行

angular material表格内容自动折行

关键代码

.mat-cell, .mat-footer-cell, .mat-header-cell {
    // fix for ie11 'align-items: center'
    word-break: break-all !important;
    max-width: 120px !important;
}

<mat-table #tableReq [dataSource]="commonList" *ngIf="logType==='datareq'">
    <ng-container matColumnDef="time">
        <th mat-header-cell *matHeaderCellDef>数据</th>
        <td mat-cell *matCellDef="let data">{{data.data}}</td>
    </ng-container>

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

效果图

总结：

改这种组件库封装的一般思路：
1.查找官网，使用官方钦定的属性
2.右键点击检查元素，在找到控制该元素的类名，直接在样式文件中重写该类
（很暴力但有效，如果能有其他方式我会再贴出来但，也请大佬能够帮忙补充）