mirror of https://github.com/ElemeFE/element
Table: fix current-row-key and select event bug (#15983)
parent
b06bcd3791
commit
292b4e80ab
|
@ -5,7 +5,10 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
states: {
|
||||
current: null
|
||||
// 不可响应的,设置 currentRowKey 时,data 不一定存在,也许无法算出正确的 currentRow
|
||||
// 把该值缓存一下,当用户点击修改 currentRow 时,把该值重置为 null
|
||||
_currentRowKey: null,
|
||||
currentRow: null
|
||||
}
|
||||
};
|
||||
},
|
||||
|
@ -13,31 +16,52 @@ export default {
|
|||
methods: {
|
||||
setCurrentRowKey(key) {
|
||||
this.assertRowKey();
|
||||
|
||||
const { states } = this;
|
||||
const { data = [], rowKey } = states;
|
||||
const currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
|
||||
states.currentRow = currentRow ? currentRow : null;
|
||||
this.states._currentRowKey = key;
|
||||
this.setCurrentRowByKey(key);
|
||||
},
|
||||
|
||||
updateCurrentRow() {
|
||||
restoreCurrentRowKey() {
|
||||
this.states._currentRowKey = null;
|
||||
},
|
||||
|
||||
setCurrentRowByKey(key) {
|
||||
const { states } = this;
|
||||
const { data = [], rowKey } = states;
|
||||
let currentRow = null;
|
||||
if (rowKey) {
|
||||
currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
|
||||
}
|
||||
states.currentRow = currentRow;
|
||||
},
|
||||
|
||||
updateCurrentRow(currentRow) {
|
||||
const { states, table } = this;
|
||||
const { rowKey } = states;
|
||||
const { rowKey, _currentRowKey } = states;
|
||||
// data 为 null 时,结构时的默认值会被忽略
|
||||
const data = states.data || [];
|
||||
const oldCurrentRow = states.currentRow;
|
||||
|
||||
// 当 currentRow 不在 data 中时尝试更新数据
|
||||
if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
|
||||
let newCurrentRow = null;
|
||||
if (rowKey) {
|
||||
newCurrentRow = arrayFind(data, item => {
|
||||
return getRowIdentity(item, rowKey) === getRowIdentity(oldCurrentRow, rowKey);
|
||||
});
|
||||
if (currentRow) {
|
||||
this.restoreCurrentRowKey();
|
||||
states.currentRow = currentRow;
|
||||
if (oldCurrentRow !== currentRow) {
|
||||
this.table.$emit('current-change', currentRow, oldCurrentRow);
|
||||
}
|
||||
states.currentRow = newCurrentRow;
|
||||
if (newCurrentRow !== oldCurrentRow) {
|
||||
table.$emit('current-change', null, oldCurrentRow);
|
||||
} else {
|
||||
// 当 currentRow 不在 data 中时尝试更新数据
|
||||
if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
|
||||
this.restoreCurrentRowKey();
|
||||
if (rowKey) {
|
||||
const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
|
||||
this.setCurrentRowByKey(currentRowKey);
|
||||
} else {
|
||||
states.currentRow = null;
|
||||
}
|
||||
if (states.currentRow !== oldCurrentRow) {
|
||||
table.$emit('current-change', null, oldCurrentRow);
|
||||
}
|
||||
} else if (_currentRowKey) {
|
||||
this.setCurrentRowByKey(_currentRowKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -130,12 +130,7 @@ Watcher.prototype.mutations = {
|
|||
},
|
||||
|
||||
setCurrentRow(states, row) {
|
||||
const oldCurrentRow = states.currentRow;
|
||||
states.currentRow = row;
|
||||
|
||||
if (oldCurrentRow !== row) {
|
||||
this.table.$emit('current-change', row, oldCurrentRow);
|
||||
}
|
||||
this.updateCurrentRow(row);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -68,8 +68,7 @@ export default Vue.extend({
|
|||
sortProp: null,
|
||||
sortOrder: null,
|
||||
|
||||
hoverRow: null,
|
||||
currentRow: null
|
||||
hoverRow: null
|
||||
}
|
||||
};
|
||||
},
|
||||
|
@ -165,11 +164,14 @@ export default Vue.extend({
|
|||
}
|
||||
},
|
||||
|
||||
toggleRowSelection(row, selected) {
|
||||
toggleRowSelection(row, selected, emitChange = true) {
|
||||
const changed = toggleRowStatus(this.states.selection, row, selected);
|
||||
if (changed) {
|
||||
const newSelection = this.states.selection ? this.states.selection.slice() : [];
|
||||
this.table.$emit('select', newSelection, row);
|
||||
// 调用 API 修改选中值,不触发 select 事件
|
||||
if (emitChange) {
|
||||
this.table.$emit('select', newSelection, row);
|
||||
}
|
||||
this.table.$emit('selection-change', newSelection);
|
||||
}
|
||||
},
|
||||
|
@ -296,7 +298,6 @@ export default Vue.extend({
|
|||
});
|
||||
|
||||
states.filteredData = data;
|
||||
// states.data = data;
|
||||
},
|
||||
|
||||
execSort() {
|
||||
|
|
|
@ -355,7 +355,7 @@
|
|||
},
|
||||
|
||||
toggleRowSelection(row, selected) {
|
||||
this.store.toggleRowSelection(row, selected);
|
||||
this.store.toggleRowSelection(row, selected, false);
|
||||
this.store.updateAllSelected();
|
||||
},
|
||||
|
||||
|
@ -585,8 +585,12 @@
|
|||
}
|
||||
},
|
||||
|
||||
currentRowKey(newVal) {
|
||||
this.store.setCurrentRowKey(newVal);
|
||||
currentRowKey: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
if (!this.rowKey) return;
|
||||
this.store.setCurrentRowKey(value);
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
|
|
Loading…
Reference in New Issue