如何在Angular Material表格同一列添加复选框与标签

要实现Angular Material表格首列同时包含复选框与name属性值，无需使用行跨度（rowspan），只需在首列的单元格模板中同时放置复选框和名称元素，并通过CSS布局让它们横向排列即可，具体步骤如下：

1. 修改表格列定义
   将原来分开的“选择列”和“名称列”合并为一列，在<ng-container matColumnDef="select">的单元格模板中同时添加复选框和名称显示元素：

   <ng-container matColumnDef="select">
     <!-- 表头单元格 -->
     <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox 
         (change)="$event ? masterToggle() : null"
         [checked]="selection.hasValue() && isAllSelected()"
         [indeterminate]="selection.hasValue() && !isAllSelected()">
       </mat-checkbox>
     </th>
     <!-- 数据行单元格 -->
     <td mat-cell *matCellDef="let row">
       <div class="cell-content">
         <mat-checkbox 
           (click)="$event.stopPropagation()"
           (change)="$event ? selection.toggle(row) : null"
           [checked]="selection.isSelected(row)">
         </mat-checkbox>
         <span>{{row.name}}</span>
       </div>
     </td>
   </ng-container>
   

2. 更新显示列配置
   在组件类的displayedColumns数组中，移除原来单独的name列，只保留合并后的select列：

   displayedColumns: string[] = ['select', 'position', 'weight', 'symbol'];
   

3. 添加CSS布局样式
   为单元格内的容器添加flex布局，让复选框和名称横向对齐：

   .cell-content {
     display: flex;
     align-items: center;
     gap: 8px; /* 调整复选框与名称的间距 */
   }
   

说明 #

你之前尝试的行跨度（rowspan）并不适用于当前需求——因为需求是同一单元格内同时放置两个元素，而非跨多行合并单元格。通过在单元格内嵌套容器并使用flex布局，就能轻松实现复选框与名称的横向排列，同时保留复选框的选择功能。

内容的提问来源于stack exchange，提问作者rugma ramachandran