如何在angular选项卡中使用数据表

ng add @angular/material

import { MatTabsModule } from '@angular/material/tabs';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    MatTabsModule,
    MatTableModule
  ],
  // ...
})
export class YourModule { }

<mat-tab-group>
  <mat-tab label="选项卡1">
    <ng-template matTabContent>
      <mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="column1">
          <mat-header-cell *matHeaderCellDef>列1</mat-header-cell>
          <mat-cell *matCellDef="let element">{{ element.column1 }}</mat-cell>
        </ng-container>
        <!-- 定义其他列 -->
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
    </ng-template>
  </mat-tab>
  <!-- 定义其他选项卡 -->
</mat-tab-group>

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

@Component({
  // ...
})
export class YourComponent {
  dataSource = new MatTableDataSource<any>([
    { column1: '数据1', column2: '数据2' },
    // 添加其他数据
  ]);
  displayedColumns = ['column1', 'column2']; // 显示的列
}