Table: fire selection-change when row is removed.

pull/948/head
furybean 2016-11-09 17:47:00 +08:00
parent 41c53099c8
commit 2951e6843f
2 changed files with 89 additions and 10 deletions

View File

@ -19,12 +19,12 @@ const sortData = (data, states) => {
return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod); return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod);
}; };
const getSelectedMap = function(states, rowKey) { const getKeysMap = function(array, rowKey) {
const selectionMap = {}; const arrayMap = {};
states.selection.forEach((row, index) => { (array || []).forEach((row, index) => {
selectionMap[getRowIdentity(row, rowKey)] = { row, index }; arrayMap[getRowIdentity(row, rowKey)] = { row, index };
}); });
return selectionMap; return arrayMap;
}; };
const toggleRowSelection = function(states, row, selected) { const toggleRowSelection = function(states, row, selected) {
@ -88,19 +88,24 @@ const TableStore = function(table, initialState = {}) {
TableStore.prototype.mutations = { TableStore.prototype.mutations = {
setData(states, data) { setData(states, data) {
const dataInstanceChanged = states._data !== data;
states._data = data; states._data = data;
states.data = sortData((data || []), states); states.data = sortData((data || []), states);
this.updateCurrentRow(); this.updateCurrentRow();
const selection = states.selection;
if (!states.reserveSelection) { if (!states.reserveSelection) {
if (dataInstanceChanged) {
this.clearSelection(); this.clearSelection();
} else {
this.cleanSelection();
}
this.updateAllSelected();
} else { } else {
const rowKey = states.rowKey; const rowKey = states.rowKey;
if (rowKey) { if (rowKey) {
const selectedMap = getSelectedMap(states, rowKey); const selection = states.selection;
const selectedMap = getKeysMap(selection, rowKey);
states.data.forEach((row) => { states.data.forEach((row) => {
const rowId = getRowIdentity(row, rowKey); const rowId = getRowIdentity(row, rowKey);
@ -266,6 +271,35 @@ TableStore.prototype.toggleRowSelection = function(row, selected) {
toggleRowSelection(this.states, row, selected); toggleRowSelection(this.states, row, selected);
}; };
TableStore.prototype.cleanSelection = function() {
const selection = this.states.selection || [];
const data = this.states.data;
const rowKey = this.states.rowKey;
let deleted;
if (rowKey) {
deleted = [];
const selectedMap = getKeysMap(selection, rowKey);
const dataMap = getKeysMap(data, rowKey);
for (let key in selectedMap) {
if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
deleted.push(selectedMap[key].row);
}
}
} else {
deleted = selection.filter((item) => {
return data.indexOf(item) === -1;
});
}
deleted.forEach((deletedItem) => {
selection.splice(selection.indexOf(deletedItem), 1);
});
if (deleted.length) {
this.table.$emit('selection-change', selection);
}
};
TableStore.prototype.updateAllSelected = function() { TableStore.prototype.updateAllSelected = function() {
const states = this.states; const states = this.states;
const { selection, rowKey, selectable, data } = states; const { selection, rowKey, selectable, data } = states;
@ -276,7 +310,7 @@ TableStore.prototype.updateAllSelected = function() {
let selectedMap; let selectedMap;
if (rowKey) { if (rowKey) {
selectedMap = getSelectedMap(states, rowKey); selectedMap = getKeysMap(states.selection, rowKey);
} }
const isSelected = function(row) { const isSelected = function(row) {

View File

@ -611,6 +611,51 @@ describe('Table', () => {
}, DELAY); }, DELAY);
}); });
it('emit selection-change after row has been removed', done => {
const vm = createVue({
template: `
<el-table :data="testData" @selection-change="change">
<el-table-column type="selection" />
<el-table-column prop="name" label="name" />
<el-table-column prop="release" label="release" />
<el-table-column prop="director" label="director" />
<el-table-column prop="runtime" label="runtime" />
</el-table>
`,
created() {
this.testData = getTestData();
},
data() {
return { selected: [], testData: null };
},
methods: {
change(rows) {
this.selected = rows;
},
filterSelect(row, index) {
return index > 2;
}
}
}, true);
setTimeout(_ => {
vm.$el.querySelector('.el-checkbox').click();
setTimeout(_ => {
expect(vm.selected).to.length(5);
vm.testData.splice(0, 1);
setTimeout(_ => {
expect(vm.selected).to.length(4);
destroyVM(vm);
done();
});
}, DELAY);
}, DELAY);
});
it('reserve-selection', done => { it('reserve-selection', done => {
const getData = function(page = 0) { const getData = function(page = 0) {
let id = 0; let id = 0;