Fixed #2068 - DataTable row-select index is always undefined

pull/2220/head
Tuğçe Küçükoğlu 2022-02-24 15:39:09 +03:00 committed by Tuğçe Küçükoğlu
parent 227623f3b3
commit 2fb44329a8
2 changed files with 16 additions and 16 deletions

View File

@ -8,8 +8,8 @@
<component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" /> <component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
<component :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.body && !column.children.editor && d_editing" /> <component :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.body && !column.children.editor && d_editing" />
<template v-else-if="columnProp('selectionMode')"> <template v-else-if="columnProp('selectionMode')">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="columnProp('selectionMode') === 'single'" /> <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" v-if="columnProp('selectionMode') === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="columnProp('selectionMode') ==='multiple'" /> <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox($event, rowIndex)" v-else-if="columnProp('selectionMode') ==='multiple'" />
</template> </template>
<template v-else-if="columnProp('rowReorder')"> <template v-else-if="columnProp('rowReorder')">
<i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i> <i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
@ -146,11 +146,11 @@ export default {
data: this.rowData data: this.rowData
}); });
}, },
toggleRowWithRadio(event) { toggleRowWithRadio(event, index) {
this.$emit('radio-change', event); this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data});
}, },
toggleRowWithCheckbox(event) { toggleRowWithCheckbox(event, index) {
this.$emit('checkbox-change', event); this.$emit('checkbox-change', { originalEvent: event.originalEvent, index: index, data: event.data });
}, },
isEditable() { isEditable() {
return this.column.children && this.column.children.editor != null; return this.column.children && this.column.children.editor != null;

View File

@ -731,7 +731,7 @@ export default {
this.$emit('update:selection', _selection); this.$emit('update:selection', _selection);
} }
this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'}); this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
} }
else { else {
if(this.isSingleSelectionMode()) { if(this.isSingleSelectionMode()) {
@ -743,18 +743,18 @@ export default {
this.$emit('update:selection', _selection); this.$emit('update:selection', _selection);
} }
this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'}); this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
} }
} }
else { else {
if (this.selectionMode === 'single') { if (this.selectionMode === 'single') {
if (selected) { if (selected) {
this.$emit('update:selection', null); this.$emit('update:selection', null);
this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'}); this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
} }
else { else {
this.$emit('update:selection', rowData); this.$emit('update:selection', rowData);
this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'}); this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
} }
} }
else if (this.selectionMode === 'multiple') { else if (this.selectionMode === 'multiple') {
@ -762,12 +762,12 @@ export default {
const selectionIndex = this.findIndexInSelection(rowData); const selectionIndex = this.findIndexInSelection(rowData);
const _selection = this.selection.filter((val, i) => i != selectionIndex); const _selection = this.selection.filter((val, i) => i != selectionIndex);
this.$emit('update:selection', _selection); this.$emit('update:selection', _selection);
this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'}); this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
} }
else { else {
const _selection = this.selection ? [...this.selection, rowData] : [rowData]; const _selection = this.selection ? [...this.selection, rowData] : [rowData];
this.$emit('update:selection', _selection); this.$emit('update:selection', _selection);
this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'}); this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
} }
} }
} }
@ -863,11 +863,11 @@ export default {
if (this.isSelected(rowData)) { if (this.isSelected(rowData)) {
this.$emit('update:selection', null); this.$emit('update:selection', null);
this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'radiobutton'}); this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
} }
else { else {
this.$emit('update:selection', rowData); this.$emit('update:selection', rowData);
this.$emit('row-select', {originalEvent: event, data: rowData, type: 'radiobutton'}); this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
} }
}, },
toggleRowWithCheckbox(event) { toggleRowWithCheckbox(event) {
@ -877,13 +877,13 @@ export default {
const selectionIndex = this.findIndexInSelection(rowData); const selectionIndex = this.findIndexInSelection(rowData);
const _selection = this.selection.filter((val, i) => i != selectionIndex); const _selection = this.selection.filter((val, i) => i != selectionIndex);
this.$emit('update:selection', _selection); this.$emit('update:selection', _selection);
this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'checkbox'}); this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
} }
else { else {
let _selection = this.selection ? [...this.selection] : []; let _selection = this.selection ? [...this.selection] : [];
_selection = [..._selection, rowData]; _selection = [..._selection, rowData];
this.$emit('update:selection', _selection); this.$emit('update:selection', _selection);
this.$emit('row-select', {originalEvent: event, data: rowData, type: 'checkbox'}); this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
} }
}, },
toggleRowsWithCheckbox(event) { toggleRowsWithCheckbox(event) {