mat-table是Angular Material库中的一个组件,用于展示表格数据。要启用多选和动态列的功能,可以按照以下步骤进行操作:
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
<mat-table [dataSource]="dataSource" matSort>
<!-- 添加多选列 -->
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<!-- 添加其他列 -->
<ng-container matColumnDef="column1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.column1}}</mat-cell>
</ng-container>
<!-- 其他列的定义 -->
<!-- 动态列 -->
<ng-container *ngFor="let column of dynamicColumns" [matColumnDef]="column">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</mat-header-cell>
<mat-cell *matCellDef="let element">{{element[column]}}</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 } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';
@Component({
selector: 'app-my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.css']
})
export class MyTableComponent {
dataSource = new MatTableDataSource<any>(data); // 替换data为实际的数据源
displayedColumns: string[] = ['select', 'column1']; // 替换为实际的列名
dynamicColumns: string[] = []; // 动态列名
selection = new SelectionModel<any>(true, []);
// 全选/取消全选
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
// 是否全部选中
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
}
以上代码示例中,我们通过使用mat-table组件、mat-checkbox组件和mat-sort-header指令实现了多选和动态列的功能。其中,多选功能通过SelectionModel实现,动态列通过ngFor指令动态生成列定义。
对于mat-table的更多详细用法和配置选项,可以参考腾讯云的Angular Material文档: Angular Material - Table
希望以上回答能够满足你的需求,如果还有其他问题,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云