Table: retain currently selected row when sorting the table. (#11348)

Author: jikkai

packages/table/src/table-store.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import debounce from 'throttle-debounce/debounce';
 import merge from 'element-ui/src/utils/merge';
+import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
 import { orderBy, getColumnById, getRowIdentity } from './util';
 
 const sortData = (data, states) => {
@@ -192,6 +193,17 @@ TableStore.prototype.mutations = {
   changeSortCondition(states, options) {
     states.data = sortData((states.filteredData || states._data || []), states);
 
+    const el = this.table.$el;
+    if (el) {
+      const data = states.data;
+      const tr = el.querySelector('tbody').children;
+      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
+      const row = rows[data.indexOf(states.currentRow)];
+
+      [].forEach.call(rows, row => removeClass(row, 'current-row'));
+      addClass(row, 'current-row');
+    }
+
     if (!options || !options.silent) {
       this.table.$emit('sort-change', {
         column: this.states.sortingColumn,

test/unit/specs/table.spec.js

@@ -1785,7 +1785,7 @@ describe('Table', () => {
           <el-table-column prop="name" label="片名" />
           <el-table-column prop="release" label="发行日期" />
           <el-table-column prop="director" label="导演" />
-          <el-table-column prop="runtime" label="时长（分）" />
+          <el-table-column prop="runtime" label="时长（分）" sortable />
         </el-table>
       `,
 
@@ -1800,12 +1800,22 @@ describe('Table', () => {
         expect(tr.classList.contains('current-row')).to.be.true;
         const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
 
-        triggerEvent(rows[2], 'click', true, false);
+        triggerEvent(rows[1], 'click', true, false);
         setTimeout(_ => {
           expect(tr.classList.contains('current-row')).to.be.false;
-          expect(rows[2].classList.contains('current-row')).to.be.true;
-          destroyVM(vm);
-          done();
+          expect(rows[1].classList.contains('current-row')).to.be.true;
+
+          const ths = vm.$el.querySelectorAll('.el-table__header-wrapper thead th');
+          triggerEvent(ths[3], 'click', true, false);
+
+          setTimeout(_ => {
+            const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+
+            expect(rows[1].classList.contains('current-row')).to.be.false;
+            expect(rows[3].classList.contains('current-row')).to.be.true;
+            destroyVM(vm);
+            done();
+          }, DELAY);
         }, DELAY);
       }, DELAY);
     }, DELAY);