Table: fix current-row-key and select event bug (#15983)

pull/16124/head
hetech 2019-06-18 16:09:52 +08:00 committed by luckyCao
parent b06bcd3791
commit 292b4e80ab
4 changed files with 56 additions and 32 deletions

View File

@ -5,7 +5,10 @@ export default {
data() { data() {
return { return {
states: { states: {
current: null // 不可响应的,设置 currentRowKey 时data 不一定存在,也许无法算出正确的 currentRow
// 把该值缓存一下,当用户点击修改 currentRow 时,把该值重置为 null
_currentRowKey: null,
currentRow: null
} }
}; };
}, },
@ -13,32 +16,53 @@ export default {
methods: { methods: {
setCurrentRowKey(key) { setCurrentRowKey(key) {
this.assertRowKey(); this.assertRowKey();
this.states._currentRowKey = key;
const { states } = this; this.setCurrentRowByKey(key);
const { data = [], rowKey } = states;
const currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
states.currentRow = currentRow ? currentRow : null;
}, },
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 { states, table } = this;
const { rowKey } = states; const { rowKey, _currentRowKey } = states;
// data 为 null 时,结构时的默认值会被忽略 // data 为 null 时,结构时的默认值会被忽略
const data = states.data || []; const data = states.data || [];
const oldCurrentRow = states.currentRow; const oldCurrentRow = states.currentRow;
if (currentRow) {
this.restoreCurrentRowKey();
states.currentRow = currentRow;
if (oldCurrentRow !== currentRow) {
this.table.$emit('current-change', currentRow, oldCurrentRow);
}
} else {
// 当 currentRow 不在 data 中时尝试更新数据 // 当 currentRow 不在 data 中时尝试更新数据
if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) { if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
let newCurrentRow = null; this.restoreCurrentRowKey();
if (rowKey) { if (rowKey) {
newCurrentRow = arrayFind(data, item => { const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
return getRowIdentity(item, rowKey) === getRowIdentity(oldCurrentRow, rowKey); this.setCurrentRowByKey(currentRowKey);
}); } else {
states.currentRow = null;
} }
states.currentRow = newCurrentRow; if (states.currentRow !== oldCurrentRow) {
if (newCurrentRow !== oldCurrentRow) {
table.$emit('current-change', null, oldCurrentRow); table.$emit('current-change', null, oldCurrentRow);
} }
} else if (_currentRowKey) {
this.setCurrentRowByKey(_currentRowKey);
}
} }
} }
} }

View File

@ -130,12 +130,7 @@ Watcher.prototype.mutations = {
}, },
setCurrentRow(states, row) { setCurrentRow(states, row) {
const oldCurrentRow = states.currentRow; this.updateCurrentRow(row);
states.currentRow = row;
if (oldCurrentRow !== row) {
this.table.$emit('current-change', row, oldCurrentRow);
}
} }
}; };

View File

@ -68,8 +68,7 @@ export default Vue.extend({
sortProp: null, sortProp: null,
sortOrder: null, sortOrder: null,
hoverRow: null, hoverRow: null
currentRow: 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); const changed = toggleRowStatus(this.states.selection, row, selected);
if (changed) { if (changed) {
const newSelection = this.states.selection ? this.states.selection.slice() : []; const newSelection = this.states.selection ? this.states.selection.slice() : [];
// 调用 API 修改选中值,不触发 select 事件
if (emitChange) {
this.table.$emit('select', newSelection, row); this.table.$emit('select', newSelection, row);
}
this.table.$emit('selection-change', newSelection); this.table.$emit('selection-change', newSelection);
} }
}, },
@ -296,7 +298,6 @@ export default Vue.extend({
}); });
states.filteredData = data; states.filteredData = data;
// states.data = data;
}, },
execSort() { execSort() {

View File

@ -355,7 +355,7 @@
}, },
toggleRowSelection(row, selected) { toggleRowSelection(row, selected) {
this.store.toggleRowSelection(row, selected); this.store.toggleRowSelection(row, selected, false);
this.store.updateAllSelected(); this.store.updateAllSelected();
}, },
@ -585,8 +585,12 @@
} }
}, },
currentRowKey(newVal) { currentRowKey: {
this.store.setCurrentRowKey(newVal); immediate: true,
handler(value) {
if (!this.rowKey) return;
this.store.setCurrentRowKey(value);
}
}, },
data: { data: {