Angular-Material表格数据右对齐的两种方式

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
半年前有一个模块是需要统计公司的各项数据（均为数字），所以需要保持数据右对齐。
由于Angular-Material表格的样式设置真的极其困难……之前有设置过对齐、宽度、高度等等，很容易将人整崩溃。由于我使用了无数种方式都无法设置右对齐（可能有方法但是我确实没找到），故重新改了写法。

方法一：使用 MatTextColumn选择器

先来看看material表格的代码：

<table mat-table class="table" [dataSource]="tableData">
    <ng-container matColumnDef="order_id">
        <th mat-header-cell *matHeaderCellDef>订单号</th>
        <td mat-cell *matCellDef="let row">{{ row.orders_id }}</td>
    </ng-container>
    <ng-container matColumnDef="products_sku">
        <th mat-header-cell *matHeaderCellDef>SPU</th>
        <td mat-cell *matCellDef="let row">{{ row.products_sku }}</td>
    </ng-container>
    <ng-container matColumnDef="cnname">
        <th mat-header-cell *matHeaderCellDef>跟单人员</th>
        <td mat-cell *matCellDef="let row">{{ row.cnname }}</td>
    </ng-container>
    <ng-container matColumnDef="update_production_time">
        <th mat-header-cell *matHeaderCellDef>给销售看的回货日期</th>
        <td mat-cell *matCellDef="let row">{{ row.update_production_time | date:"yyyy-MM-dd" }}</td>
    </ng-container>
    <!-- 表尾 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="product" matRipple>
</table>

使用MatTextColumn选择器的原生表格代码：

<table mat-table class="scheduleTableSecond" [dataSource]="scheduleTableSecond"
[@animateStagger]="{value:'50'}" fusePerfectScrollbar>
    <mat-text-column name="cnname" headerText="原材料人员" justify="end"></mat-text-column>
    <mat-text-column name="suppliers_name" headerText="工厂" justify="end"></mat-text-column>
    <mat-text-column name="order_count" headerText="订单数" justify="end"></mat-text-column>
    <mat-text-column name="pre_order_qty" headerText="下单数" justify="end"></mat-text-column>
    <tr mat-header-row *matHeaderRowDef="displayedColumnsSecond; sticky:true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsSecond;"></tr>
</table>

justify="end"为数据右对齐，值为start则为左对齐。
但原生表格虽然方便设置样式、代码简洁，但只是用来展示简单的文本，无法放按钮以及进行一些操作等等。
所以还可以material表格和原生表格结合编写：

<table mat-table class="scheduleTable" [dataSource]="scheduleTable" [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
    <mat-text-column name="cnname" headerText="原材料人员" justify="end"></mat-text-column>
    <mat-text-column name="need_qty" headerText="订单数" justify="end"></mat-text-column>
    <mat-text-column name="fact_qty" headerText="完成数" justify="end"></mat-text-column>
    <mat-text-column name="expected_qty" headerText="延期数" justify="end"></mat-text-column>
    <ng-container matColumnDef="delay_order_id">
        <th mat-header-cell *matHeaderCellDef style="text-align:end">延期订单号</th>
        <td mat-cell *matCellDef="let row" style="text-align:end">
            <button mat-stroked-button (click)="DelayOrder(row.delay_order_arr)"> {{ row.delay_order_count }}</button>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

方法二：在material表格中使用无序列表

这个方法是我今天在做其他模块的时候无意发现的，代码如下：

<ng-container matColumnDef="orderId">
    <mat-header-cell *matHeaderCellDef fxFlex="10">编号</mat-header-cell>
    <mat-cell *matCellDef="let element" fxFlex="10">
        <ul class="formText">
            <li>{{ element.suppliers_orders_id }}</li>
            <li>明细:{{ element.suppliers_orders_detail_id }}</li>
            <li>{{ element.cnname }}</li>
            <li>
                <button mat-stroked-button color="basic" (click)="Note(element.result_note,'采购备注')"
                *ngIf="element.result_note !== '' && element.result_note !== null">采购备注</button>
            </li>
            <li>
                <button mat-stroked-button color="basic" (click)="Note(element.note,'仓库备注')"
                *ngIf="element.note !== '' && element.note !== null">仓库备注</button>
            </li>
        </ul>
    </mat-cell>
</ng-container>

当在mat-cell中使用无序列表时，且消除列表的圆点后，数据会默认强制右对齐，css代码如下：

.formText {
        padding: 0 0 0 0;

        li {
            padding-top: 3px;
            padding-bottom: 3px;
            text-align: right;
            list-style: none;
            font-size: 18px;
        }
    }