add Tree component current node method (#5988)

* Tree: add current node method

* Tree: remove current-node-key attribute

* fix warn message

* Update tree.md

* Update tree.md

examples/docs/en-US/tree.md

@@ -861,7 +861,6 @@ Only one node among the same level can be expanded at one time.
 | load                  | method for loading subtree data          | function(node, resolve)     | —               | —       |
 | render-content        | render function for tree node            | Function(h, { node }        | —               | —       |
 | highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |
-| current-node-key      | key of current node, a set only prop     | string, number              | —               | —       |
 | default-expand-all    | whether to expand all nodes by default   | boolean                     | —               | false   |
 | expand-on-click-node  | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | —                           | true            |         |
 | auto-expand-parent    | whether to expand father node when a child node is expanded | boolean                     | —               | true    |
@@ -890,6 +889,10 @@ Only one node among the same level can be expanded at one time.
 | 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. |
 | setCheckedKeys  | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setChecked      | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
+| getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |
+| getCurrentNode  | return the highlight node (null if no node is highlighted) | — |
+| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted |
+| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
 
 ### Events
 | Event Name     | Description                              | Parameters                               |

examples/docs/zh-CN/tree.md

@@ -860,7 +860,6 @@
 | load                  | 加载子树数据的方法                                | function(node, resolve)     | —    | —     |
 | render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node }        | —    | —     |
 | highlight-current     | 是否高亮当前选中节点，默认值是 false。                   | boolean                     | —    | false |
-| current-node-key      | 当前选中节点的 key，只写属性                         | string, number              | —    | —     |
 | default-expand-all    | 是否默认展开所有节点                               | boolean                     | —    | false |
 | expand-on-click-node  | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean                     | —    | true  |
 | auto-expand-parent    | 展开子节点的时候是否自动展开父节点                        | boolean                     | —    | true  |
@@ -889,6 +888,10 @@
 | getCheckedKeys  | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false` |
 | setCheckedKeys  | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性  | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `false` |
 | setChecked      | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false |
+| getCurrentKey   | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | — |
+| getCurrentNode  | 获取当前被选中节点的 node，若没有节点被选中则返回 null | — |
+| setCurrentKey   | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key |
+| setCurrentNode  | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |
 
 ### Events
 | 事件名称           | 说明             | 回调参数                                     |

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

@@ -278,6 +278,12 @@ export default class TreeStore {
     this.currentNode = node;
   }
 
+  setUserCurrentNode(node) {
+    const key = node[this.key];
+    const currNode = this.nodesMap[key];
+    this.setCurrentNode(currNode);
+  }
+
   setCurrentNodeKey(key) {
     const node = this.getNode(key);
     if (node) {

packages/tree/src/tree.vue

@@ -79,7 +79,6 @@
         default: false
       },
       highlightCurrent: Boolean,
-      currentNodeKey: [String, Number],
       load: Function,
       filterNodeMethod: Function,
       accordion: Boolean,
@@ -109,10 +108,6 @@
         this.store.defaultExpandedKeys = newVal;
         this.store.setDefaultExpandedKeys(newVal);
       },
-      currentNodeKey(newVal) {
-        this.store.setCurrentNodeKey(newVal);
-        this.store.currentNodeKey = newVal;
-      },
       data(newVal) {
         this.store.setData(newVal);
       }
@@ -136,17 +131,34 @@
       getCheckedKeys(leafOnly) {
         return this.store.getCheckedKeys(leafOnly);
       },
+      getCurrentNode() {
+        const currentNode = this.store.getCurrentNode();
+        return currentNode ? currentNode.data : null;
+      },
+      getCurrentKey() {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey');
+        const currentNode = this.getCurrentNode();
+        return currentNode ? currentNode[this.nodeKey] : null;
+      },
       setCheckedNodes(nodes, leafOnly) {
         if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
         this.store.setCheckedNodes(nodes, leafOnly);
       },
       setCheckedKeys(keys, leafOnly) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
         this.store.setCheckedKeys(keys, leafOnly);
       },
       setChecked(data, checked, deep) {
         this.store.setChecked(data, checked, deep);
       },
+      setCurrentNode(node) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
+        this.store.setUserCurrentNode(node);
+      },
+      setCurrentKey(key) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
+        this.store.setCurrentNodeKey(key);
+      },
       handleNodeExpand(nodeData, node, instance) {
         this.broadcast('ElTreeNode', 'tree-node-expand', node);
         this.$emit('node-expand', nodeData, node, instance);

test/unit/specs/tree.spec.js

@@ -399,6 +399,49 @@ describe('Tree', () => {
     }, 0);
   });
 
+  it('setCurrentKey', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentKey(111);
+    vm.$nextTick(() => {
+      expect(tree.store.currentNode.data.id).to.equal(111);
+      done();
+    });
+  });
+
+  it('setCurrentNode', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentNode({
+      id: 111,
+      label: '三级 1-1'
+    });
+    vm.$nextTick(() => {
+      expect(tree.store.currentNode.data.id).to.equal(111);
+      done();
+    });
+  });
+
+  it('getCurrentKey', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentKey(111);
+    vm.$nextTick(() => {
+      expect(tree.getCurrentKey()).to.equal(111);
+      done();
+    });
+  });
+
+  it('getCurrentNode', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentKey(111);
+    vm.$nextTick(() => {
+      expect(tree.getCurrentNode().id).to.equal(111);
+      done();
+    });
+  });
+
   it('set disabled checkbox', done => {
     vm = getDisableTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const node = document.querySelectorAll('.el-tree-node__content')[2];