在Angular中使用primeng table选择多行,可以通过以下步骤实现:
<p-table [value]="dataList" selectionMode="multiple" [(selection)]="selectedItems">
<ng-template pTemplate="header">
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<!-- 更多列... -->
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr>
<td><p-checkbox [(ngModel)]="rowData.selected"></p-checkbox></td>
<td>{{ rowData.column1 }}</td>
<td>{{ rowData.column2 }}</td>
<!-- 更多列... -->
</tr>
</ng-template>
</p-table>
在上面的示例中,我们使用了Table组件的selectionMode属性设置为"multiple",并通过[(selection)]绑定了selectedItems变量来保存选中的行。
selectedItems: any[] = [];
dataList: any[] = [
{ column1: 'Data 1', column2: 'Value 1', selected: false },
{ column1: 'Data 2', column2: 'Value 2', selected: false },
// 更多数据行...
];
submitSelection() {
// 输出选中的行数据
console.log(this.selectedItems);
}
以上就是使用primeng table在Angular中选择多行的基本步骤。根据具体需求,你可以自定义复选框的样式和行为。了解更多关于primeng table的详细信息,可以参考腾讯云的相关产品PrimeNG表格组件介绍:链接地址。
腾讯云存储专题直播
企业创新在线学堂
企业创新在线学堂
云+社区技术沙龙[第28期]
云原生正发声
腾讯云GAME-TECH沙龙
Elastic 中国开发者大会
云+社区技术沙龙[第8期]
领取专属 10元无门槛券
手把手带您无忧上云