第一列固定在垫表中答案

【问题标题】：First column fixed in mat-table第一列固定在垫表中
【发布时间】：2018-08-01 18:58:18
【问题描述】：

您是否知道如何在 Angular Material 的 mat-table 中修复第一列并使用水平滚动？

非常感谢您的帮助。

【问题讨论】：

【解决方案1】：

您应该为此使用 mat-table API - sticky 值。

<ng-container matColumnDef="name" sticky>
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

请查看官方文档： https://material.angular.io/components/table/examples 示例名称：“带有粘性列的表格”

【讨论】：

为行尾的列加上第二个标志stickyEnd

【解决方案2】：

为你的组件添加一个方法，我们称之为isSticky(column)。然后将[sticky] 绑定到它。请参阅下面的完整工作示例链接。

HTML

<div class="app-table-wrapper">
  <table mat-table [dataSource]="dataSource" id="app-table">
      <ng-container *ngFor="let column of displayedColumns" matColumnDef={{column}} [sticky]="isSticky(column)">
          <th mat-header-cell *matHeaderCellDef> {{column}} </th>
          <td mat-cell *matCellDef="let element">{{element[column]}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>S
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

isSticky (column: string): boolean {
  return column === 'col1' ? true : false;
}

完整示例

StackBlitz - angular-sticky-table

【讨论】：

谢谢，这正是我需要的解决方案。几个月后，我在开发过程中使用了这个功能，我很满意。
如何使用 isSticky 修复多个列？退货只能冻结一列。我用数组试过了，但没用……你有什么想法吗？

【解决方案3】：

你需要在mat-table ng-container

中使用sticky

    .example-container {
        height: 600px;
        width: 550px;
        overflow: auto;
      }

      td.mat-column-star {
        width: 20px;
        padding-right: 8px;
      }
      
      th.mat-column-position,
      td.mat-column-position {
        padding-left: 8px;
      }
      
      
      .mat-table-sticky:first-child {
        border-left: 1px solid #e0e0e0;
        padding-left: 6px;
        width: 5%;

      }

    <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" class="example-container responsive-table">
     <table mat-table [dataSource]="dataSource" >
       <ng-container matColumnDef="name" sticky>
         <th mat-header-cell *matHeaderCellDef> Name </th>
         <td mat-cell *matCellDef="let element"> {{name}} </td>
       </ng-container>

      <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Description </th>
         <td mat-cell *matCellDef="let element"> {{desc}} </td>
       </ng-container>
     </table>
    </div>

【讨论】：