Tree: Fix issue ElemeFE#15538 caused by two Tree sharing the same dat…

…a. (ElemeFE#15615) * Tree: fix ElemeFE#15538 by adding more detect logic. * Tree: fix ElemeFE#15538 and add test case. * Tree: fix eslint error * Tree: remove arrayContains function
qingdengyue · Jun 21, 2019 · 52413af · 52413af
1 parent 6706226
commit 52413af
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 3 deletions.
diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js
@@ -1,5 +1,6 @@
 import objectAssign from 'element-ui/src/utils/merge';
 import { markNodeData, NODE_KEY } from './util';
+import { arrayFindIndex } from 'element-ui/src/utils/util';
 
 export const getChildState = node => {
   let all = true;
@@ -435,8 +436,10 @@ export default class Node {
     const newNodes = [];
 
     newData.forEach((item, index) => {
-      if (item[NODE_KEY]) {
-        newDataMap[item[NODE_KEY]] = { index, data: item };
+      const key = item[NODE_KEY];
+      const isNodeExists = !!key && arrayFindIndex(oldData, data => data[NODE_KEY] === key) >= 0;
+      if (isNodeExists) {
+        newDataMap[key] = { index, data: item };
       } else {
         newNodes.push({ index, data: item });
       }

diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM, waitImmediate } from '../util';
+import { createVue, destroyVM, waitImmediate, wait } from '../util';
 
 const DELAY = 10;
 
@@ -831,4 +831,63 @@ describe('Tree', () => {
       done();
     });
   });
+
+  it('update multi tree data', async() => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-tree ref="tree1" :data="data" node-key="id" :props="defaultProps"></el-tree>
+          <el-tree ref="tree2" :data="data" node-key="id" :props="defaultProps"></el-tree>
+        </div>
+        `,
+
+      data() {
+        return {
+          data: [{
+            id: 1,
+            label: '一级 1',
+            children: [{
+              id: 11,
+              label: '二级 1-1',
+              children: [{
+                id: 111,
+                label: '三级 1-1'
+              }]
+            }]
+          }, {
+            id: 2,
+            label: '一级 2',
+            children: [{
+              id: 21,
+              label: '二级 2-1'
+            }, {
+              id: 22,
+              label: '二级 2-2'
+            }]
+          }, {
+            id: 3,
+            label: '一级 3',
+            children: [{
+              id: 31,
+              label: '二级 3-1'
+            }, {
+              id: 32,
+              label: '二级 3-2'
+            }]
+          }],
+          defaultProps: {
+            children: 'children',
+            label: 'label'
+          }
+        };
+      }
+    }, true);
+    const nodeData = { label: '新增 1', id: 4 };
+    vm.data.push(nodeData);
+    await wait();
+    const tree1 = vm.$refs.tree1;
+    expect(tree1.getNode(4).data).to.equal(nodeData);
+    const tree2 = vm.$refs.tree2;
+    expect(tree2.getNode(4).data).to.equal(nodeData);
+  });
 });