Table: fix selection-change not fire in some condition. (#1198)

packages/table/src/table-store.js

@@ -255,11 +255,18 @@ TableStore.prototype.isSelected = function(row) {
 TableStore.prototype.clearSelection = function() {
   const states = this.states;
   states.isAllSelected = false;
+  const oldSelection = states.selection;
   states.selection = [];
+  if (oldSelection.length > 0) {
+    this.table.$emit('selection-change', states.selection);
+  }
 };
 
 TableStore.prototype.toggleRowSelection = function(row, selected) {
-  toggleRowSelection(this.states, row, selected);
+  const changed = toggleRowSelection(this.states, row, selected);
+  if (changed) {
+    this.table.$emit('selection-change', this.states.selection);
+  }
 };
 
 TableStore.prototype.cleanSelection = function() {

packages/theme-default/src/table.css

@@ -296,6 +296,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: normal;
+      word-break: break-all;
       line-height: 24px;
       padding-left: 18px;
       padding-right: 18px;

test/unit/specs/table.spec.js

@@ -985,6 +985,71 @@ describe('Table', () => {
     });
   });
 
+  describe('methods', () => {
+    const createTable = function(prop = '', opts) {
+      return createVue({
+        template: `
+          <el-table ref="table" :data="testData" @${prop}="handleEvent">
+            <el-table-column type="selection" />
+            <el-table-column prop="name" />
+            <el-table-column prop="release" />
+            <el-table-column prop="director" />
+            <el-table-column prop="runtime"/>
+          </el-table>
+        `,
+
+        methods: {
+          handleEvent(selection) {
+            this.fireCount++;
+            this.selection = selection;
+          }
+        },
+
+        created() {
+          this.testData = getTestData();
+        },
+
+        data() {
+          return { selection: null, testData: this.testData, fireCount: 0 };
+        }
+      }, true);
+    };
+
+    it('toggleRowSelection', () => {
+      const vm = createTable('selection-change');
+      vm.$refs.table.toggleRowSelection(vm.testData[0]);
+      expect(vm.selection).to.length(1);
+      expect(vm.fireCount).to.equal(1);
+
+      // test use second parameter
+      vm.$refs.table.toggleRowSelection(vm.testData[0], true);
+      expect(vm.fireCount).to.equal(1);
+
+      vm.$refs.table.toggleRowSelection(vm.testData[0], false);
+      expect(vm.fireCount).to.equal(2);
+      expect(vm.selection).to.length(0);
+
+      destroyVM(vm);
+    });
+
+    it('clearSelection', () => {
+      const vm = createTable('selection-change');
+      vm.$refs.table.toggleRowSelection(vm.testData[0]);
+      expect(vm.selection).to.length(1);
+      expect(vm.fireCount).to.equal(1);
+
+      // clear selection
+      vm.$refs.table.clearSelection();
+      expect(vm.fireCount).to.equal(2);
+      expect(vm.selection).to.length(0);
+
+      vm.$refs.table.clearSelection();
+      expect(vm.fireCount).to.equal(2);
+
+      destroyVM(vm);
+    });
+  });
+
   it('hover', done => {
     const vm = createVue({
       template: `