Angular PrimeNG Table 编辑问题

葬天尘
  • 265

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

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

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

<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>
回复
阅读 735
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏