基于Angular与Angular Material实现用户自定义表格列添加及命名的组件开发

1. 前期准备 #

确保项目已集成Angular Material，若未集成，先通过命令安装依赖并导入核心模块：

ng add @angular/material

在使用该组件的模块中，导入所需的Material模块及表单模块：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CustomDataTableComponent } from './custom-data-table/custom-data-table.component';

@NgModule({
  declarations: [AppComponent, CustomDataTableComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatInputModule,
    MatButtonModule,
    FormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 定义数据结构 #

在组件目录下创建数据模型，明确列和行的格式：

// custom-data-table.model.ts
export interface TableColumn {
  key: string; // 列的唯一标识，对应行数据的键名
  name: string; // 用户自定义的列显示名称
}

export interface TableRow {
  [key: string]: any; // 支持任意键值对，适配自定义列结构
}

3. 组件核心逻辑实现 #

编写组件类，实现添加列、添加行、单元格数据更新等核心功能：

// custom-data-table.component.ts
import { Component } from '@angular/core';
import { TableColumn, TableRow } from './custom-data-table.model';

@Component({
  selector: 'app-custom-data-table',
  templateUrl: './custom-data-table.component.html',
  styleUrls: ['./custom-data-table.component.scss']
})
export class CustomDataTableComponent {
  columns: TableColumn[] = [];
  dataSource: TableRow[] = [];
  displayedColumns: string[] = []; // 绑定MatTable的列显示配置

  // 添加新列
  addColumn(columnName: string): void {
    if (!columnName.trim()) return;
    // 生成唯一键名避免重复
    const columnKey = `col_${Date.now()}`;
    this.columns.push({ key: columnKey, name: columnName });
    this.updateDisplayedColumns();
    // 为已有行补充新列的空值
    this.dataSource.forEach(row => row[columnKey] = '');
    this.dataSource = [...this.dataSource];
  }

  // 添加新行
  addRow(): void {
    const newRow: TableRow = {};
    // 为每个列初始化空值，确保表格单元格完整
    this.columns.forEach(col => newRow[col.key] = '');
    this.dataSource.push(newRow);
    this.dataSource = [...this.dataSource]; // 触发表格刷新
  }

  // 更新表格显示列列表
  private updateDisplayedColumns(): void {
    this.displayedColumns = this.columns.map(col => col.key);
  }

  // 同步单元格数据变更
  onCellChange(row: TableRow, columnKey: string, value: any): void {
    row[columnKey] = value;
  }
}

4. 模板与交互实现 #

编写HTML模板，整合控件与Angular Material表格，实现可视化操作：

<!-- custom-data-table.component.html -->
<div class="table-controls">
  <!-- 列添加控件 -->
  <mat-form-field appearance="fill">
    <mat-label>输入列名</mat-label>
    <input matInput #columnNameInput placeholder="例如：姓名">
  </mat-form-field>
  <button mat-raised-button color="primary" 
          (click)="addColumn(columnNameInput.value); columnNameInput.value=''">
    添加列
  </button>

  <!-- 行添加控件 -->
  <button mat-raised-button color="accent" style="margin-left: 10px;" (click)="addRow()">
    添加行
  </button>
</div>

<!-- 自定义表格主体 -->
<div class="table-container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- 动态生成列定义 -->
    <ng-container [matColumnDef]="col.key" *ngFor="let col of columns">
      <th mat-header-cell *matHeaderCellDef> {{ col.name }} </th>
      <td mat-cell *matCellDef="let row">
        <input matInput [(ngModel)]="row[col.key]" 
               (ngModelChange)="onCellChange(row, col.key, $event)">
      </td>
    </ng-container>

    <!-- 渲染表头与数据行 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

5. 基础样式优化 #

添加简单样式优化布局体验：

// custom-data-table.component.scss
.table-controls {
  margin: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-container {
  margin: 0 20px;
}

table {
  width: 100%;
}

mat-cell input {
  width: 100%;
  padding: 4px;
}

可选扩展功能 #

如果需要更完整的体验，可按需添加：

• 列删除/重命名功能
• 行删除功能
• 数据导出（如JSON、Excel）
• 列排序、筛选功能
• 单元格数据格式校验

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