Table:Fix hides the child nodes of the tree when new nodes are added …

…[issues ElemeFE#14933]

examples/play/index.vue

@@ -1,15 +1,99 @@
 <template>
   <div style="margin: 20px;">
-    <el-input v-model="input" placeholder="请输入内容"></el-input>
+    <el-button @click="handleAddRow">添加</el-button>
+    <el-table
+            :data="list"
+            row-key="id"
+            highlight-current-row
+            @current-change="handleCurrentChange"
+            :expand-row-keys="expanded"
+            lazy
+            :load="loadApplication"
+            ref="table"
+    >
+      <el-table-column
+              type="index"
+              width="50">
+      </el-table-column>
+      <el-table-column
+              prop="name"
+              label="名称"
+              width="180">
+      </el-table-column>
+      <el-table-column
+              prop="code"
+              label="标识"
+              width="180">
+      </el-table-column>
+      <el-table-column
+              label="Home"
+              width="360">
+        <template slot-scope="scope">
+          <a :href="scope.row.home">{{ scope.row.home }}</a>
+        </template>
+      </el-table-column>
+      <el-table-column
+              prop="repos"
+              min-width="200"
+              label="代码仓库">
+      </el-table-column>
+      <el-table-column
+              fixed="right"
+              label="操作"
+              width="100">
+        <template slot-scope="scope">
+          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
+          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
+  let id = 100;
   export default {
     data() {
       return {
-        input: 'Hello Element UI!'
+        expanded: [1],
+        list: [{
+          id: 1,
+          hasChildren: true,
+          name: '测试'+1,
+          children: [{
+            id: 2,
+            hasChildren: true,
+            name: '测试'+2
+          }]
+        }]
       };
+    },
+    methods:{
+      loadApplication(data, node, resolve){
+        id++;
+        resolve([{
+          id: id,
+          hasChildren: true,
+          name: '测试'+id
+        }]);
+      },
+      handleAddRow(){
+        id++;
+        this.list.push({
+          id: id,
+          hasChildren: true,
+          name: '测试'+id
+        });
+      },
+      handleCurrentChange(){
+
+      },
+      handleEdit(){
+
+      },
+      handleDelete(){
+
+      }
     }
   };
 </script>

packages/table/src/table-store.js

@@ -649,8 +649,14 @@ TableStore.prototype.updateCurrentRow = function() {
   const table = this.table;
   const data = states.data || [];
   const oldCurrentRow = states.currentRow;
-
-  if (data.indexOf(oldCurrentRow) === -1) {
+  const notInTreeData = (row)=>{
+    if (!row || !states.rowKey || !states.treeData) {
+      return true;
+    }
+    let key = row[states.rowKey];
+    return !states.treeData[key];
+  };
+  if (data.indexOf(oldCurrentRow) === -1 && notInTreeData(oldCurrentRow)) {
     if (states.rowKey && oldCurrentRow) {
       let newCurrentRow = null;
       for (let i = 0; i < data.length; i++) {

packages/table/src/table.vue

@@ -491,44 +491,56 @@
       },
 
       getTableTreeData(data) {
+        const originData = this.store.states.treeData;
+        const expandRowKeys = this.expandRowKeys || [];
+
         const treeData = {};
-        const traverse = (children, parentData, level) => {
+        this.store.states.treeData = treeData;
+
+        const fillOrigin = (children) => {
+          if (children) {
+            children.forEach(rowKey => {
+              if (originData[rowKey]) {
+                treeData[rowKey] = originData[rowKey];
+                fillOrigin(treeData[rowKey].children);
+              }
+            });
+          }
+        };
+        const traverse = (children, parentData, level, display) => {
           children.forEach(item => {
             const rowKey = this.getRowKey(item);
-            treeData[rowKey] = {
-              display: false,
-              level
-            };
-            parentData.children.push(rowKey);
-            if (Array.isArray(item.children) && item.children.length) {
-              treeData[rowKey].children = [];
-              treeData[rowKey].expanded = false;
-              traverse(item.children, treeData[rowKey], level + 1);
-            }
-          });
-        };
-        if (data) {
-          data.forEach(item => {
             const containChildren = Array.isArray(item.children) && item.children.length;
-            if (!(containChildren || item.hasChildren)) return;
-            const rowKey = this.getRowKey(item);
-            const treeNode = {
-              level: 0,
-              expanded: false,
-              display: true,
-              children: []
+            const expanded = expandRowKeys.indexOf(rowKey) !== -1;
+            const treeNode = originData[rowKey] || {
+              children: [],
+              loaded: true,
+              rowKey,
+              level,
+              display,
+              expanded
             };
-            if (containChildren) {
-              treeData[rowKey] = treeNode;
-              traverse(item.children, treeData[rowKey], 1);
+            treeData[rowKey] = treeNode;
+            if (level > 0) {
+              parentData.children.push(rowKey);
+            }
+            if (treeNode.children.length) {
+              fillOrigin(treeNode.children, treeNode);
+            } else if (containChildren) {
+              traverse(item.children, treeNode, level + 1, display && expanded);
             } else if (item.hasChildren && this.lazy) {
-              treeNode.hasChildren = true;
               treeNode.loaded = false;
-              treeData[rowKey] = treeNode;
+              treeNode.hasChildren = true;
+              if (treeNode.expanded) {
+                treeNode.expanded = false;
+                this.store.loadData(item, treeNode);
+              }
             }
           });
+        };
+        if (data) {
+          traverse(data, treeData, 0, true);
         }
-        return treeData;
       }
     },
 
@@ -660,7 +672,7 @@
       data: {
         immediate: true,
         handler(value) {
-          this.store.states.treeData = this.getTableTreeData(value);
+          this.getTableTreeData(value);
           value = flattenData(value);
           this.store.commit('setData', value);
           if (this.$ready) {