Angular10项目中用到了 PrimeNG 的表格组件 table,这货的行内编辑感觉不太合理,看下面的 gif 文件,按照官方的案例制作了行内编辑,通过点击行的图标开启正行编辑状态,但是还可以通过鼠标左键点击开启其他行的一个单元格的编辑状态,我如果做能达到这样的效果:
- 通过点击行的“笔型”图标开启行内编辑状态
- 不点击“笔型”图标是无法开启单元格的编辑状态的
列的动态生成的代码是模仿官方案例写的,如下
<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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…