Table: fix current-row-key and select event bug (ElemeFE#15983)

qingdengyue · Jun 21, 2019 · 2fca2e5 · 2fca2e5
1 parent 3f132c6
commit 2fca2e5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 29 deletions.
diff --git a/packages/table/src/store/current.js b/packages/table/src/store/current.js
@@ -5,39 +5,63 @@ export default {
   data() {
     return {
       states: {
-        current: null
+        // 不可响应的，设置 currentRowKey 时，data 不一定存在，也许无法算出正确的 currentRow
+        // 把该值缓存一下，当用户点击修改 currentRow 时，把该值重置为 null
+        _currentRowKey: null,
+        currentRow: null
       }
     };
   },
 
   methods: {
     setCurrentRowKey(key) {
       this.assertRowKey();
+      this.states._currentRowKey = key;
+      this.setCurrentRowByKey(key);
+    },
+
+    restoreCurrentRowKey() {
+      this.states._currentRowKey = null;
+    },
 
+    setCurrentRowByKey(key) {
       const { states } = this;
       const { data = [], rowKey } = states;
-      const currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
-      states.currentRow = currentRow ? currentRow : null;
+      let currentRow = null;
+      if (rowKey) {
+        currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
+      }
+      states.currentRow = currentRow;
     },
 
-    updateCurrentRow() {
+    updateCurrentRow(currentRow) {
       const { states, table } = this;
-      const { rowKey } = states;
+      const { rowKey, _currentRowKey } = states;
       // data 为 null 时，结构时的默认值会被忽略
       const data = states.data || [];
       const oldCurrentRow = states.currentRow;
 
-      // 当 currentRow 不在 data 中时尝试更新数据
-      if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
-        let newCurrentRow = null;
-        if (rowKey) {
-          newCurrentRow = arrayFind(data, item => {
-            return getRowIdentity(item, rowKey) === getRowIdentity(oldCurrentRow, rowKey);
-          });
+      if (currentRow) {
+        this.restoreCurrentRowKey();
+        states.currentRow = currentRow;
+        if (oldCurrentRow !== currentRow) {
+          this.table.$emit('current-change', currentRow, oldCurrentRow);
         }
-        states.currentRow = newCurrentRow;
-        if (newCurrentRow !== oldCurrentRow) {
-          table.$emit('current-change', null, oldCurrentRow);
+      } 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);
         }
       }
     }

diff --git a/packages/table/src/store/index.js b/packages/table/src/store/index.js
@@ -130,12 +130,7 @@ Watcher.prototype.mutations = {
   },
 
   setCurrentRow(states, row) {
-    const oldCurrentRow = states.currentRow;
-    states.currentRow = row;
-
-    if (oldCurrentRow !== row) {
-      this.table.$emit('current-change', row, oldCurrentRow);
-    }
+    this.updateCurrentRow(row);
   }
 };
 

diff --git a/packages/table/src/store/watcher.js b/packages/table/src/store/watcher.js
@@ -68,8 +68,7 @@ export default Vue.extend({
         sortProp: null,
         sortOrder: null,
 
-        hoverRow: null,
-        currentRow: null
+        hoverRow: null
       }
     };
   },
@@ -165,11 +164,14 @@ export default Vue.extend({
       }
     },
 
-    toggleRowSelection(row, selected) {
+    toggleRowSelection(row, selected, emitChange = true) {
       const changed = toggleRowStatus(this.states.selection, row, selected);
       if (changed) {
         const newSelection = this.states.selection ? this.states.selection.slice() : [];
-        this.table.$emit('select', newSelection, row);
+        // 调用 API 修改选中值，不触发 select 事件
+        if (emitChange) {
+          this.table.$emit('select', newSelection, row);
+        }
         this.table.$emit('selection-change', newSelection);
       }
     },
@@ -296,7 +298,6 @@ export default Vue.extend({
       });
 
       states.filteredData = data;
-      // states.data = data;
     },
 
     execSort() {

diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
@@ -355,7 +355,7 @@
       },
 
       toggleRowSelection(row, selected) {
-        this.store.toggleRowSelection(row, selected);
+        this.store.toggleRowSelection(row, selected, false);
         this.store.updateAllSelected();
       },
 
@@ -585,8 +585,12 @@
         }
       },
 
-      currentRowKey(newVal) {
-        this.store.setCurrentRowKey(newVal);
+      currentRowKey: {
+        immediate: true,
+        handler(value) {
+          if (!this.rowKey) return;
+          this.store.setCurrentRowKey(value);
+        }
       },
 
       data: {