Angular 5中Mat-Table列固定（锁定）功能实现求助

我在Angular 5做mat-table项目时刚好遇到过完全一样的需求——动态生成列+Excel式的固定列，踩了不少坑，分享两个亲测可行的方案给你：

方案一：基于CSS Sticky的轻量实现（推荐简单场景） #

这个方案不需要改动表格核心结构，靠CSS粘性定位实现，能保留mat-table原生的表头交互（排序、筛选等），适合固定列数量不多、交互不复杂的场景。

步骤1：给列定义添加固定标记 #

先在你的动态列数组里加一个isFixed字段，用来标记哪些列需要固定：

// 假设你的列定义结构
interface ColumnDef {
  key: string;
  label: string;
  isFixed: boolean;
  sortable?: boolean; // 保留你原有的其他字段
}

displayedColumns: ColumnDef[] = [
  { key: 'select', label: '选择框', isFixed: true },
  { key: 'name', label: '名称', isFixed: false },
  // 其他动态生成的列...
];

步骤2：模板中动态绑定固定类和偏移量 #

在生成表头和单元格时，给固定列添加自定义类，并动态计算left偏移量（解决多列重叠问题）：

<mat-table [dataSource]="dataSource">
  <!-- 动态生成列 -->
  <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col.key">
    <mat-header-cell 
      *matHeaderCellDef 
      [class.sticky-column]="col.isFixed"
      [style.left.px]="col.stickyOffset">
      {{col.label}}
      <!-- 保留你原有的表头交互，比如排序按钮 -->
      <mat-icon *ngIf="col.sortable">arrow_upward</mat-icon>
      <!-- 固定切换按钮 -->
      <button mat-icon-button (click)="toggleColumnFixed(col.key)">
        <mat-icon>{{col.isFixed ? 'lock' : 'lock_open'}}</mat-icon>
      </button>
    </mat-header-cell>
    <mat-cell 
      *matCellDef="let row" 
      [class.sticky-column]="col.isFixed"
      [style.left.px]="col.stickyOffset">
      {{row[col.key]}}
      <mat-checkbox *ngIf="col.key === 'select'"></mat-checkbox>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns.map(c => c.key)"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns.map(c => c.key)"></mat-row>
</mat-table>

步骤3：计算固定列的偏移量 #

在组件里编写方法，计算每个固定列的left值（避免多列重叠），并在视图初始化和窗口 resize 时更新：

fixedColumns: ColumnDef[] = [];

ngAfterViewInit() {
  this.calculateStickyOffsets();
  // 监听窗口 resize，重新计算偏移
  window.addEventListener('resize', () => this.calculateStickyOffsets());
}

ngOnDestroy() {
  window.removeEventListener('resize', () => this.calculateStickyOffsets());
}

calculateStickyOffsets() {
  this.fixedColumns = this.displayedColumns.filter(col => col.isFixed);
  let offset = 0;
  this.fixedColumns.forEach(col => {
    // 获取列的实际宽度
    const colElement = document.querySelector(`mat-header-cell[matColumnDef="${col.key}"]`);
    if (colElement) {
      const width = colElement.getBoundingClientRect().width;
      col.stickyOffset = offset;
      offset += width;
    }
  });
}

// 切换列固定状态的方法
toggleColumnFixed(colKey: string) {
  const column = this.displayedColumns.find(col => col.key === colKey);
  if (column) {
    column.isFixed = !column.isFixed;
    // 重新排序：固定列移到最左侧
    this.displayedColumns = [
      ...this.displayedColumns.filter(c => c.isFixed),
      ...this.displayedColumns.filter(c => !c.isFixed)
    ];
    // 重新计算偏移量
    this.calculateStickyOffsets();
  }
}

步骤4：添加CSS样式 #

给固定列设置粘性定位，注意背景色和层级，防止滚动时透显或被覆盖：

.sticky-column {
  position: sticky;
  z-index: 10;
  background-color: #fff; /* 和表格背景色一致 */
  box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* 可选：加个阴影增强视觉区分 */
}

/* 表头固定列层级更高，避免被单元格覆盖 */
mat-header-cell.sticky-column {
  z-index: 11;
}

方案二：双表格联动（适合复杂场景） #

如果CSS sticky在某些浏览器有兼容性问题，或者固定列有复杂交互（比如合并单元格、自定义组件），可以用两个mat-table拆分固定列和滚动列，通过同步滚动和行高实现效果。

步骤1：拆分列定义 #

把列分成固定列和滚动列两组：

fixedColumns: ColumnDef[] = this.displayedColumns.filter(col => col.isFixed);
scrollableColumns: ColumnDef[] = this.displayedColumns.filter(col => !col.isFixed);

步骤2：模板中渲染两个表格 #

用flex布局把固定列表格和滚动列容器放在一起：

<div class="table-wrapper">
  <!-- 固定列表格 -->
  <mat-table class="fixed-table" [dataSource]="dataSource">
    <ng-container *ngFor="let col of fixedColumns" [matColumnDef]="col.key">
      <mat-header-cell *matHeaderCellDef>
        {{col.label}}
        <button mat-icon-button (click)="toggleColumnFixed(col.key)">
          <mat-icon>{{col.isFixed ? 'lock' : 'lock_open'}}</mat-icon>
        </button>
      </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row[col.key]}}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="fixedColumns.map(c => c.key)"></mat-header-row>
    <mat-row *matRowDef="let row; columns: fixedColumns.map(c => c.key)"></mat-row>
  </mat-table>

  <!-- 滚动列容器 -->
  <div class="scrollable-wrapper" #scrollableContainer>
    <mat-table [dataSource]="dataSource">
      <ng-container *ngFor="let col of scrollableColumns" [matColumnDef]="col.key">
        <mat-header-cell *matHeaderCellDef>{{col.label}}</mat-header-cell>
        <mat-cell *matCellDef="let row">{{row[col.key]}}</mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="scrollableColumns.map(c => c.key)"></mat-header-row>
      <mat-row *matRowDef="let row; columns: scrollableColumns.map(c => c.key)"></mat-row>
    </mat-table>
  </div>
</div>

步骤3：添加CSS样式 #

确保两个表格对齐，滚动容器只横向滚动：

.table-wrapper {
  display: flex;
  border: 1px solid #e0e0e0;
}

.fixed-table {
  flex-shrink: 0;
  border-right: 1px solid #e0e0e0;
}

.scrollable-wrapper {
  overflow-x: auto;
  flex-grow: 1;
}

/* 强制两个表格的行高一致 */
.fixed-table mat-header-row,
.fixed-table mat-row,
.scrollable-wrapper mat-header-row,
.scrollable-wrapper mat-row {
  height: 48px; /* 和mat-table默认行高匹配，可自行调整 */
}

步骤4：同步滚动和交互 #

监听滚动容器的滚动事件，同步固定列表格的纵向滚动；同时确保表头交互（如排序）在两个表格中同步：

@ViewChild('scrollableContainer') scrollableContainer!: ElementRef;
@ViewChild('fixedTable') fixedTable!: ElementRef;

ngAfterViewInit() {
  // 同步纵向滚动
  this.scrollableContainer.nativeElement.addEventListener('scroll', (e: Event) => {
    const target = e.target as HTMLElement;
    this.fixedTable.nativeElement.scrollTop = target.scrollTop;
  });
}

// 切换固定状态时更新列分组
toggleColumnFixed(colKey: string) {
  const column = this.displayedColumns.find(col => col.key === colKey);
  if (column) {
    column.isFixed = !column.isFixed;
    // 重新排序列
    this.displayedColumns = [
      ...this.displayedColumns.filter(c => c.isFixed),
      ...this.displayedColumns.filter(c => !c.isFixed)
    ];
    // 更新列分组
    this.fixedColumns = this.displayedColumns.filter(c => c.isFixed);
    this.scrollableColumns = this.displayedColumns.filter(c => !c.isFixed);
  }
}

注意事项 #

1. 不管用哪个方案，固定列的背景色一定要设置，否则滚动时会透出后面的内容；
2. 方案一中的列宽计算如果用固定值会更稳定，比如给每个列设置width: 120px，就不需要动态获取DOM宽度；
3. 如果你的mat-table有纵向滚动，方案二的同步滚动一定要做，否则两个表格的行会错位；
4. 表头的交互（排序、筛选）要统一处理逻辑，确保两个表格的行为一致。

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