Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.8k views
in Technique[技术] by (71.8m points)

Angular PrimeNG Table 编辑问题

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...