diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue index 44f6a0392a..1ad17e3682 100755 --- a/src/components/datatable/BodyCell.vue +++ b/src/components/datatable/BodyCell.vue @@ -40,7 +40,7 @@ import Ripple from 'primevue/ripple'; export default { name: 'BodyCell', emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', - 'row-toggle', 'radio-change', 'checkbox-change'], + 'row-toggle', 'radio-change', 'checkbox-change', 'editing-cell-change'], props: { rowData: { type: Object, @@ -74,6 +74,10 @@ export default { type: Boolean, default: false }, + editingMeta: { + type: Object, + default: null + }, editMode: { type: String, default: null @@ -156,6 +160,7 @@ export default { }, switchCellToViewMode() { this.d_editing = false; + this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: false}); this.unbindDocumentEditListener(); OverlayEventBus.off('overlay-click', this.overlayEventListener); this.overlayEventListener = null; @@ -167,6 +172,7 @@ export default { if (!this.d_editing) { this.d_editing = true; this.bindDocumentEditListener(); + this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: true}); this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex}); this.overlayEventListener = (e) => { @@ -296,13 +302,16 @@ export default { return (DomHandler.find(this.$el, '.p-invalid').length === 0); }, onRowEditInit(event) { - this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex}); + this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: true}); + this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.columnProp('field'), index: this.rowIndex}); }, onRowEditSave(event) { - this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex}); + this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.columnProp('field'), index: this.rowIndex}); + this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: false}); }, onRowEditCancel(event) { - this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex}); + this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.columnProp('field'), index: this.rowIndex}); + this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: false}); }, updateStickyPosition() { if (this.columnProp('frozen')) { @@ -328,7 +337,7 @@ export default { }, computed: { editingRowData() { - return this.d_editing ? {...this.rowData} : this.rowData; + return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData; }, containerClass() { return [this.columnProp('bodyClass'), this.columnProp('class'), { diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue index ee112e8294..c43dbc90b4 100755 --- a/src/components/datatable/TableBody.vue +++ b/src/components/datatable/TableBody.vue @@ -18,9 +18,9 @@ @@ -52,7 +52,7 @@ export default { emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown', 'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle', 'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', - 'row-edit-init', 'row-edit-save', 'row-edit-cancel'], + 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change'], props: { value: { type: Array, @@ -183,7 +183,8 @@ export default { }, data() { return { - rowGroupHeaderStyleObject: {} + rowGroupHeaderStyleObject: {}, + editingMeta: {} } }, methods: { @@ -429,6 +430,26 @@ export default { onCheckboxChange(event) { this.$emit('checkbox-change', event); }, + onEditingCellChange(event) { + let { data, field, index, editing } = event; + let meta = this.editingMeta[index]; + + if (editing) { + if (!meta) { + this.editingMeta[index] = { data: { ...data }, fields: [] }; + } + this.editingMeta[index]['fields'].push(field); + } + else if (meta) { + let fields = meta['fields']; + fields = fields.filter(f => f !== field); + + if (!fields.length) + delete this.editingMeta[index]; + else + meta['fields'] = fields; + } + }, onCellEditInit(event) { this.$emit('cell-edit-init', event); },