Table: fix setCurrentRow unable to clear highlight row (ElemeFE#16879)

oleksiikhr · Jan 13, 2020 · 0540df0 · 0540df0
1 parent ed5ba37
commit 0540df0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 21 deletions.
diff --git a/packages/table/src/store/current.js b/packages/table/src/store/current.js
@@ -35,34 +35,41 @@ export default {
     },
 
     updateCurrentRow(currentRow) {
+      const { states, table } = this;
+      const oldCurrentRow = states.currentRow;
+      if (currentRow && currentRow !== oldCurrentRow) {
+        states.currentRow = currentRow;
+        table.$emit('current-change', currentRow, oldCurrentRow);
+        return;
+      }
+      if (!currentRow && oldCurrentRow) {
+        states.currentRow = null;
+        table.$emit('current-change', null, oldCurrentRow);
+      }
+    },
+
+    updateCurrentRowData() {
       const { states, table } = this;
       const { rowKey, _currentRowKey } = states;
       // data 为 null 时，结构时的默认值会被忽略
       const data = states.data || [];
       const oldCurrentRow = states.currentRow;
 
-      if (currentRow) {
-        this.restoreCurrentRowKey();
-        states.currentRow = currentRow;
-        if (oldCurrentRow !== currentRow) {
-          this.table.$emit('current-change', currentRow, oldCurrentRow);
+      // 当 currentRow 不在 data 中时尝试更新数据
+      if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
+        if (rowKey) {
+          const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
+          this.setCurrentRowByKey(currentRowKey);
+        } else {
+          states.currentRow = null;
         }
-      } else {
-        // 当 currentRow 不在 data 中时尝试更新数据
-        if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
-          this.restoreCurrentRowKey();
-          if (rowKey) {
-            const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
-            this.setCurrentRowByKey(currentRowKey);
-          } else {
-            states.currentRow = null;
-          }
-          if (states.currentRow !== oldCurrentRow) {
-            table.$emit('current-change', null, oldCurrentRow);
-          }
-        } else if (_currentRowKey) {
-          this.setCurrentRowByKey(_currentRowKey);
+        if (states.currentRow === null) {
+          table.$emit('current-change', null, oldCurrentRow);
         }
+      } else if (_currentRowKey) {
+        // 把初始时下设置的 rowKey 转化成 rowData
+        this.setCurrentRowByKey(_currentRowKey);
+        this.restoreCurrentRowKey();
       }
     }
   }

diff --git a/packages/table/src/store/index.js b/packages/table/src/store/index.js
@@ -10,7 +10,7 @@ Watcher.prototype.mutations = {
     this.execQuery();
     // 数据变化，更新部分数据。
     // 没有使用 computed，而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140
-    this.updateCurrentRow();
+    this.updateCurrentRowData();
     this.updateExpandRows();
     if (states.reserveSelection) {
       this.assertRowKey();

diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
@@ -1843,6 +1843,41 @@ describe('Table', () => {
       assertSortIconCount(vm.$el, 'sorting icon is not one after sort same column');
       destroyVM(vm);
     });
+
+    it('setCurrentRow', async() => {
+      const vm = createVue({
+        template: `
+        <div>
+          <el-table ref="table" :data="testData" highlight-current-row>
+            <el-table-column prop="name" sortable />
+            <el-table-column prop="release" sortable />
+            <el-table-column prop="director" sortable />
+            <el-table-column prop="runtime" sortable />
+          </el-table>
+          <button class="clear" @click="clear">clear</button>
+        </div>
+        `,
+        data() {
+          return { testData: getTestData() };
+        },
+        methods: {
+          clear() {
+            this.$refs.table.setCurrentRow();
+          }
+        }
+      });
+
+      vm.$refs.table.setCurrentRow(vm.testData[1]);
+      await waitImmediate();
+      const secondRow = vm.$el.querySelectorAll('.el-table__row')[1];
+      expect(secondRow.classList.contains('current-row')).to.true;
+
+      vm.$el.querySelector('.clear').click();
+      await waitImmediate();
+      expect(secondRow.classList.contains('current-row')).to.false;
+
+      destroyVM(vm);
+    });
   });
 
   it('hover', async() => {