From b4a0aa85adfd0b691295be44943d7f6d84419307 Mon Sep 17 00:00:00 2001
From: hetech <dengzhiyang123@126.com>
Date: Tue, 27 Aug 2019 14:36:00 +0800
Subject: [PATCH] Table: set toggleAllSelection as instance property (#17137)

---
 packages/checkbox/src/checkbox.vue  |  2 +-
 packages/table/src/store/helper.js  |  4 +++
 packages/table/src/store/watcher.js |  5 ++-
 test/unit/specs/table.spec.js       | 48 ++++++++++++++++++++++++++---
 4 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index 86e771be6e..00df69e99b 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/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>
diff --git a/packages/table/src/store/helper.js b/packages/table/src/store/helper.js
index 81d73f6042..b27ee896bc 100644
--- a/packages/table/src/store/helper.js
+++ b/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];
   });
diff --git a/packages/table/src/store/watcher.js b/packages/table/src/store/watcher.js
index c657f25916..641655b39a 100644
--- a/packages/table/src/store/watcher.js
+++ b/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;
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index adaa965ba4..04c197919c 100644
--- a/test/unit/specs/table.spec.js
+++ b/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]);