角度动态表内联编辑

ng add @angular/material

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

interface DataItem {
  id: number;
  name: string;
  value: number;
}

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'value', 'actions'];
  dataSource = new MatTableDataSource<DataItem>([]);

  ngOnInit(): void {
    // 初始化数据
    this.dataSource.data = [
      { id: 1, name: 'Item 1', value: 100 },
      { id: 2, name: 'Item 2', value: 200 },
      { id: 3, name: 'Item 3', value: 300 }
    ];
  }
}

<!-- dynamic-table.component.html -->
<mat-table [dataSource]="dataSource">
  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-cell *matCellDef="let element; let i = index">
      <mat-form-field *ngIf="!element.editing" (click)="editItem(i)">
        <input matInput readonly [value]="element.name">
      </mat-form-field>
      <mat-form-field *ngIf="element.editing">
        <input matInput [(ngModel)]="element.name">
      </mat-form-field>
    </mat-cell>
  </ng-container>

  <!-- Value Column -->
  <ng-container matColumnDef="value">
    <mat-cell *matCellDef="let element; let i = index">
      <mat-form-field *ngIf="!element.editing" (click)="editItem(i)">
        <input matInput readonly [value]="element.value">
      </mat-form-field>
      <mat-formField *ngIf="element.editing">
        <input matInput [(ngModel)]="element.value">
      </tr>
    </mat-cell>
  </ng-container>

  <!-- Actions Column -->
  <ng-container matColumnDef="actions">
    <mat-cell *matCellDef="let element; let i = index">
      <button mat-icon-button *ngIf="!element.editing" (click)="editItem(i)">
        <mat-icon>edit</mat-icon>
      </button>
      <button mat-icon-button *ngIf="element.editing" (click)="saveItem(i)">
        <mat-icon>save</mat-icon>
      </button>
      <button mat-icon-button *ngIf="element.editing" (click)="cancelEditItem(i)">
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

interface DataItem {
  id: number;
  name: string;
  value: number;
  editing: boolean;
}

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'value', 'actions'];
  dataSource = new MatTableDataSource<DataItem>([]);

  ngOnInit(): void {
    // 初始化数据
    this.dataSource.data = [
      { id: 1, name: 'Item 1', value: 100, editing: false },
      { id: 2, name: 'Item 2', value: 200, editing: false },
      { id: 3, name: 'Item 3', value: 300, editing: false }
    ];
  }

  editItem(index: number): void {
    const dataItem = this.dataSource.data[index];
    dataItem.editing = true;
    this.dataSource.data = [...this.dataSource.data]; // 触发变更检测
  }

  saveItem(index: number): void {
    const dataItem = this.dataSource.data[index];
    dataItem.editing = false;
    this.dataSource.data = [...this.dataSource.data]; // 触发变更检测
  }

  cancelEditItem(index: number): void {
    const dataItem = this.dataSource.data[index];
    dataItem.editing = false;
    this.dataSource.data = [...this.dataSource.data]; // 触发变更检测
  }
}

/* dynamic-table.component.css */
.mat-table {
  width: 100%;
}

.mat-cell {
  cursor: pointer;
}

.mat-form-field {
  width: 100%;
}