mirror of https://github.com/ElemeFE/element
Table: set toggleAllSelection as instance property (#17137)
parent
c3a2d417f4
commit
da7aec9ce9
|
@ -17,7 +17,7 @@
|
|||
'is-focus': focus
|
||||
}"
|
||||
:tabindex="indeterminate ? 0 : false"
|
||||
:role="indeterminate ? checkbox : false"
|
||||
:role="indeterminate ? 'checkbox' : false"
|
||||
:aria-checked="indeterminate ? 'mixed' : false"
|
||||
>
|
||||
<span class="el-checkbox__inner"></span>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import Store from './index';
|
||||
import debounce from 'throttle-debounce/debounce';
|
||||
|
||||
export function createStore(table, initialState = {}) {
|
||||
if (!table) {
|
||||
|
@ -7,6 +8,9 @@ export function createStore(table, initialState = {}) {
|
|||
|
||||
const store = new Store();
|
||||
store.table = table;
|
||||
// fix https://github.com/ElemeFE/element/issues/14075
|
||||
// related pr https://github.com/ElemeFE/element/pull/14146
|
||||
store.toggleAllSelection = debounce(10, store._toggleAllSelection);
|
||||
Object.keys(initialState).forEach(key => {
|
||||
store.states[key] = initialState[key];
|
||||
});
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import Vue from 'vue';
|
||||
import debounce from 'throttle-debounce/debounce';
|
||||
import merge from 'element-ui/src/utils/merge';
|
||||
import { getKeysMap, getRowIdentity, getColumnById, getColumnByKey, orderBy, toggleRowStatus } from '../util';
|
||||
import expand from './expand';
|
||||
|
@ -168,7 +167,7 @@ export default Vue.extend({
|
|||
}
|
||||
},
|
||||
|
||||
toggleAllSelection: debounce(10, function() {
|
||||
_toggleAllSelection() {
|
||||
const states = this.states;
|
||||
const { data = [], selection } = states;
|
||||
// when only some rows are selected (but not all), select or deselect all of them
|
||||
|
@ -195,7 +194,7 @@ export default Vue.extend({
|
|||
this.table.$emit('selection-change', selection ? selection.slice() : []);
|
||||
}
|
||||
this.table.$emit('select-all', selection);
|
||||
}),
|
||||
},
|
||||
|
||||
updateSelectionByRowKey() {
|
||||
const states = this.states;
|
||||
|
|
|
@ -567,12 +567,8 @@ describe('Table', () => {
|
|||
</el-table>
|
||||
`,
|
||||
|
||||
created() {
|
||||
this.testData = getTestData();
|
||||
},
|
||||
|
||||
data() {
|
||||
return { testData: this.testData };
|
||||
return { testData: getTestData() };
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -1716,6 +1712,48 @@ describe('Table', () => {
|
|||
}, 50);
|
||||
});
|
||||
|
||||
it('toggleAllSelection debounce', async() => {
|
||||
const spy = sinon.spy();
|
||||
const vm = createVue({
|
||||
template: `
|
||||
<div>
|
||||
<el-table ref="table" :data="testData" @selection-change="change">
|
||||
<el-table-column type="selection" />
|
||||
<el-table-column prop="name" />
|
||||
</el-table>
|
||||
<el-table ref="table1" :data="testData1" @selection-change="change">
|
||||
<el-table-column type="selection" />
|
||||
<el-table-column prop="name" />
|
||||
</el-table>
|
||||
</div>
|
||||
`,
|
||||
|
||||
data() {
|
||||
return {
|
||||
testData: getTestData(),
|
||||
testData1: getTestData()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
change(selection) {
|
||||
spy(selection);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$refs.table.toggleAllSelection();
|
||||
this.$refs.table1.toggleAllSelection();
|
||||
}
|
||||
}, true);
|
||||
|
||||
await wait(50);
|
||||
expect(spy.callCount).to.be.equal(2);
|
||||
expect(spy.args[0][0].length).to.be.equal(5);
|
||||
expect(spy.args[1][0].length).to.be.equal(5);
|
||||
destroyVM(vm);
|
||||
});
|
||||
|
||||
it('clearSelection', () => {
|
||||
const vm = createTable('selection-change');
|
||||
vm.$refs.table.toggleRowSelection(vm.testData[0]);
|
||||
|
|
Loading…
Reference in New Issue