Angular PrimeNG Table 编辑问题

Question

Angular10项目中用到了 PrimeNG 的表格组件 table，这货的行内编辑感觉不太合理，看下面的 gif 文件，按照官方的案例制作了行内编辑，通过点击行的图标开启正行编辑状态，但是还可以通过鼠标左键点击开启其他行的一个单元格的编辑状态，我如果做能达到这样的效果：

1. 通过点击行的“笔型”图标开启行内编辑状态
2. 不点击“笔型”图标是无法开启单元格的编辑状态的

列的动态生成的代码是模仿官方案例写的，如下

<td pEditableColumn *ngFor="let col of columns">
    <p-cellEditor>
        <ng-template pTemplate="input">
            <input pInputText type="text" class="p-inputtext-sm" [(ngModel)]="rowData[col.field]">
        </ng-template>
        <ng-template pTemplate="output">
            {{ rowData[col.field] }}
        </ng-template>
    </p-cellEditor>
</td>