angular primeng 的table组件在设置了selection属性和p-tableRadioButton后怎么让table每一行的RadioButton不能再取消选中只能选择别的行进行选中
可以通过监听
在模板中,添加
<p-table [value]="data" selectionMode="single">
<ng-template pTemplate="header">
<tr>
<th style="width: 2.5em"></th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData">
<td><p-tableRadioButton [value]="rowData" (change)="onRowSelect(rowData)"></p-tableRadioButton></td>
<td>{{rowData.col1}}</td>
<td>{{rowData.col2}}</td>
</tr>
</ng-template>
</p-table>
在组件中,实现onRowSelect方法:
selectedRow: any;
onRowSelect(rowData: any) {
if (this.selectedRow === rowData) {
return;
}
this.selectedRow = rowData;
this.data.forEach((item) => {
if (item !== rowData) {
item.selected = false; // 设置其他行RadioButton为不可选中状态
}
});
}
在上面的代码中,selectedRow变量用来记录当前选中的行。在onRowSelect方法中,如果选中的是当前已选中的行,则直接返回,不做任何操作。如果选中的是其他行,则将当前选中的行设置为选中状态,然后遍历所有其他行,将它们的selected属性设置为false,从而将它们的RadioButton设置为不可选中状态。
原文地址: http://www.cveoy.top/t/topic/brNy 著作权归作者所有。请勿转载和采集!