Tree: add updateKeyChildren method

examples/docs/en-US/tree.md

@@ -884,6 +884,7 @@ Only one node among the same level can be expanded at one time.
 | Method          | Description                              | Parameters                               |
 | --------------- | ---------------------------------------- | ---------------------------------------- |
 | filter          | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
+| updateKeyChildren | set new data to node, only works when `node-key` is assigned  | (key, data) Accept two parameters: 1. key of node 2. new data |
 | getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked          |
 | getCheckedKeys  | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |

examples/docs/zh-CN/tree.md

@@ -883,6 +883,7 @@
 | 方法名             | 说明                                       | 参数                                       |
 | --------------- | ---------------------------------------- | ---------------------------------------- |
 | filter          | 对树节点进行筛选操作                               | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
+| updateKeyChildren | 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性 | (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组 |
 | getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false` |
 | setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性          | (nodes) 接收勾选节点数据的数组                      |
 | getCheckedKeys  | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false` |

packages/tree/src/model/tree-store.js

@@ -139,6 +139,12 @@ export default class TreeStore {
     const key = this.key;
     if (!key || !node || !node.data) return;
 
+    const childNodes = node.childNodes;
+    for (let i = 0, j = childNodes.length; i < j; i++) {
+      const child = childNodes[i];
+      this.deregisterNode(child);
+    }
+
     delete this.nodesMap[node.key];
   }
 
@@ -187,6 +193,20 @@ export default class TreeStore {
     return allNodes;
   }
 
+  updateChildren(key, data) {
+    const node = this.nodesMap[key];
+    if (!node) return;
+    const childNodes = node.childNodes;
+    for (let i = 0, j = childNodes.length; i < j; i++) {
+      const child = childNodes[i];
+      this.remove(child.data);
+    }
+    for (let i = 0, j = data.length; i < j; i++) {
+      const child = data[i];
+      this.append(child, node.data);
+    }
+  }
+
   _setCheckedKeys(key, leafOnly = false, checkedKeys) {
     const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
     const cache = Object.create(null);

packages/tree/src/tree.vue

@@ -162,6 +162,10 @@
       handleNodeExpand(nodeData, node, instance) {
         this.broadcast('ElTreeNode', 'tree-node-expand', node);
         this.$emit('node-expand', nodeData, node, instance);
+      },
+      updateKeyChildren(key, data) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
+        this.store.updateChildren(key, data);
       }
     },
 

test/unit/specs/tree.spec.js

@@ -570,4 +570,21 @@ describe('Tree', () => {
       }, 100);
     }, 100);
   });
+
+  it('updateKeyChildren', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.updateKeyChildren(1, [{
+      id: 111,
+      label: '三级 1-1'
+    }]);
+    const node = document.querySelectorAll('.el-tree-node__content')[2];
+    const label = node.querySelector('.el-tree-node__label');
+    vm.$nextTick(() => {
+      expect(tree.store.nodesMap['11']).to.equal(undefined);
+      expect(tree.store.nodesMap['1'].childNodes[0].data.id).to.equal(111);
+      expect(label.textContent).to.equal('三级 1-1');
+      done();
+    });
+  });
 });