From c6e9cdac882f2bf261bb9c90f12fccd6bf8c1a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=98=86?= <git@liukun.mm.st>
Date: Wed, 16 May 2018 18:15:45 +0800
Subject: [PATCH] Table: update expandRows when setData (#11186)

* Table: update expandRows when setData.

Fix a bug that after set new table data, the expanded cells will not
be able to unexpand.

* Update table-store.js
---
 packages/table/src/table-store.js | 17 +++++++++++++++-
 test/unit/specs/table.spec.js     | 32 ++++++++++++++++++++++++++-----
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js
index 87f54a48d..af11d006a 100644
--- a/packages/table/src/table-store.js
+++ b/packages/table/src/table-store.js
@@ -139,6 +139,8 @@ TableStore.prototype.mutations = {
 
     this.updateCurrentRow();
 
+    const rowKey = states.rowKey;
+
     if (!states.reserveSelection) {
       if (dataInstanceChanged) {
         this.clearSelection();
@@ -147,7 +149,6 @@ TableStore.prototype.mutations = {
       }
       this.updateAllSelected();
     } else {
-      const rowKey = states.rowKey;
       if (rowKey) {
         const selection = states.selection;
         const selectedMap = getKeysMap(selection, rowKey);
@@ -169,6 +170,20 @@ TableStore.prototype.mutations = {
     const defaultExpandAll = states.defaultExpandAll;
     if (defaultExpandAll) {
       this.states.expandRows = (states.data || []).slice(0);
+    } else if (rowKey) {
+      // update expandRows to new rows according to rowKey
+      const ids = getKeysMap(this.states.expandRows, rowKey);
+      let expandRows = [];
+      for (const row of states.data) {
+        const rowId = getRowIdentity(row, rowKey);
+        if (ids[rowId]) {
+          expandRows.push(row);
+        }
+      }
+      this.states.expandRows = expandRows;
+    } else {
+      // clear the old rows
+      this.states.expandRows = [];
     }
 
     Vue.nextTick(() => this.table.updateScrollY());
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index 936eb757c..ad34ecec3 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -959,17 +959,16 @@ describe('Table', () => {
             </el-table>
           `,
 
-            created() {
-              this.testData = getTestData();
-            },
-
             data() {
-              return { expandCount: 0, expandRowKeys: [] };
+              return { expandCount: 0, expandRowKeys: [], testData: getTestData() };
             },
 
             methods: {
               handleExpand() {
                 this.expandCount++;
+              },
+              refreshData() {
+                this.testData = getTestData();
               }
             }
           }, true);
@@ -1026,6 +1025,29 @@ describe('Table', () => {
             done();
           }, DELAY);
         });
+
+        it('should unexpand after refresh data and click', function(done) {
+          const vm = createInstance();
+          setTimeout(_ => {
+            vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();
+            setTimeout(_ => {
+              expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);
+              expect(vm.expandCount).to.equal(1);
+              vm.refreshData();
+              setTimeout(_ => { // wait until refreshed
+                expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);
+                vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();
+                setTimeout(_ => {
+                  // should unexpand
+                  expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(0);
+                  expect(vm.expandCount).to.equal(2);
+                  destroyVM(vm);
+                  done();
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        });
       });
     });