Table: set toggleAllSelection as instance property (#17137)

packages/checkbox/src/checkbox.vue

@@ -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>

packages/table/src/store/helper.js

@@ -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];
   });

packages/table/src/store/watcher.js

@@ -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;

test/unit/specs/table.spec.js

@@ -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]);