使线路上的树UI采用了棱角分明和fxflex

Question

我想打树复选框有父母和孩子，我想有家长和孩子们上线。

我已经取得的树，但父树和子女不在一行：

            <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                    <div>
                        <button mat-icon-button disabled>
                        </button>
                        <td fxFlex="150px" fxLayoutAlign="start">
                            {{node.title}}
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_view"></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_insert"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_update"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_delete"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_export"></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_upload"></mat-checkbox>
                          </td>
                          <td fxFlex="130px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.need_approve"></mat-checkbox>
                          </td>
                    </div>
            </mat-tree-node>
            <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">

                    <div class="mat-tree-node">
                        <button mat-icon-button matTreeNodeToggle>
                            <mat-icon>
                                {{tc.isExpanded(node) ? 'keyboard_arrow_down' : 'chevron_right'}}
                              </mat-icon>
                </button>
                <tr >
                          <td fxFlex="150px" fxLayoutAlign="start">
                            {{node.title}}
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_view" (change)="update('can_view',node.id,$event.checked)" ></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_insert" (change)="update('can_insert',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_update" (change)="update('can_update',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_delete" (change)="update('can_delete',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_export" (change)="update('can_export',node.id,$event.checked)"></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_upload" (change)="update('can_upload',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="130px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.need_approve" (change)="update('need_approve',node.id,$event.checked)"></mat-checkbox>
                          </td>     
                      </tr>
                    </div>
                    <div style="margin-left:1em" [hidden]="!tc.isExpanded(node)">
                        <ng-container matTreeNodeOutlet></ng-container>
                    </div>
            </mat-nested-tree-node>
        </mat-tree>
    </tbody>

我提出，有父母和孩子一棵树，我想的复选框位置是在一条线上。

Answer 1

你要找的东西是：MatTreeNodePadding。您可以使用matTreeNodePaddingIndent，这是每个级别的缩进。从材料设计菜单的子菜单规范40PX默认号码。

只需用mat-tree-node像下面添加：

<mat-tree-node ... matTreeNodePadding matTreeNodePaddingIndent="0">
 ...
</mat-tree-node>