可以通过监听组件的change事件,在选中某一行时,将所有其他行的RadioButton设置为不可选中状态。具体代码如下:

在模板中,添加组件,并绑定change事件:

<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设置为不可选中状态。

angular primeng 的table组件在设置了selection属性和p-tableRadioButton后怎么让table每一行的RadioButton不能再取消选中只能选择别的行进行选中

原文地址: http://www.cveoy.top/t/topic/brNy 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录