fix: table trigger sort-change when mounted

Author: a631807682

packages/table/src/store/index.js

@@ -68,13 +68,13 @@ Watcher.prototype.mutations = {
   },
 
   sort(states, options) {
-    const { prop, order } = options;
+    const { prop, order, init } = options;
     if (prop) {
       const column = arrayFind(states.columns, column => column.property === prop);
       if (column) {
         column.order = order;
         this.updateSort(column, prop, order);
-        this.commit('changeSortCondition');
+        this.commit('changeSortCondition', { init });
       }
     }
   },
@@ -89,7 +89,7 @@ Watcher.prototype.mutations = {
     const ingore = { filter: true };
     this.execQuery(ingore);
 
-    if (!options || !options.silent) {
+    if (!options || !(options.silent || options.init)) {
       this.table.$emit('sort-change', {
         column,
         prop,

test/unit/specs/table.spec.js

@@ -555,6 +555,38 @@ describe('Table', () => {
         done();
       }, DELAY);
     });
+
+    it('sort-change', async() => {
+      const vm = createVue({
+        template: `
+          <el-table ref="table" :data="testData" :default-sort = "{prop: 'runtime', order: 'ascending'}">
+            <el-table-column prop="name" />
+            <el-table-column prop="release" />
+            <el-table-column prop="director" />
+            <el-table-column prop="runtime" sortable/>
+          </el-table>
+        `,
+
+        created() {
+          this.testData = getTestData();
+        },
+
+        data() {
+          return { testData: this.testData };
+        }
+      });
+
+      const spy = sinon.spy();
+      vm.$refs.table.$on('sort-change', spy);
+      await waitImmediate();
+      expect(spy.notCalled).to.be.true;// not emit when mounted
+
+      const elm = vm.$el.querySelector('.caret-wrapper');
+      elm.click();
+      await waitImmediate();
+      expect(spy.calledOnce).to.be.true;
+      destroyVM(vm);
+    });
   });
 
   describe('column attributes', () => {
@@ -1144,27 +1176,6 @@ describe('Table', () => {
           }, DELAY);
         }, DELAY);
       });
-
-      it('sort-change', done => {
-        let result;
-        const vm = createTable('sortable="custom"', '', '', '', {
-          methods: {
-            sortChange(...args) {
-              result = args;
-            }
-          }
-        }, '@sort-change="sortChange"');
-        setTimeout(_ => {
-          const elm = vm.$el.querySelector('.caret-wrapper');
-
-          elm.click();
-          setTimeout(_ => {
-            expect(result).to.exist;
-            destroyVM(vm);
-            done();
-          }, DELAY);
-        }, DELAY);
-      });
     });
 
     describe('click sortable column', () => {