Tree: add current-change event & current-node-key. (#1807)

examples/docs/en-US/tree.md

@@ -224,6 +224,7 @@ Used for node selection. In the following example, data for each layer is acquir
 | 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 |
 | auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true |
 | default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
@@ -254,5 +255,5 @@ Used for node selection. In the following example, data for each layer is acquir
 |---------- |-------- |---------- |
 | node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
 | check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
-
+| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
 

examples/docs/zh-CN/tree.md

@@ -236,6 +236,7 @@
 | 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 |
 | auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
 | default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
@@ -266,3 +267,4 @@
 |---------- |-------- |---------- |
 | node-click  | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
 | check-change  | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
+| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 |

packages/tree/src/model/node.js

@@ -100,6 +100,10 @@ export default class Node {
       this.expand(null, store.autoExpandParent);
     }
 
+    if (key && store.currentNodeKey && this.key === store.currentNodeKey) {
+      store.currentNode = this;
+    }
+
     if (store.lazy) {
       store._initDefaultCheckedNode(this);
     }

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

@@ -3,6 +3,9 @@ import { getNodeKey } from './util';
 
 export default class TreeStore {
   constructor(options) {
+    this.currentNode = null;
+    this.currentNodeKey = null;
+
     for (let option in options) {
       if (options.hasOwnProperty(option)) {
         this[option] = options[option];
@@ -233,4 +236,19 @@ export default class TreeStore {
       node.setChecked(!!checked, deep);
     }
   }
+
+  getCurrentNode() {
+    return this.currentNode;
+  }
+
+  setCurrentNode(node) {
+    this.currentNode = node;
+  }
+
+  setCurrentNodeKey(key) {
+    const node = this.getNode(key);
+    if (node) {
+      this.currentNode = node;
+    }
+  }
 };

packages/tree/src/tree-node.vue

@@ -2,7 +2,11 @@
   <div class="el-tree-node"
     @click.stop="handleClick"
     v-show="node.visible"
-    :class="{ 'is-expanded': childNodeRendered && expanded, 'is-current': tree.currentNode === _self, 'is-hidden': !node.visible }">
+    :class="{
+      'is-expanded': childNodeRendered && expanded,
+      'is-current': tree.store.currentNode === node,
+      'is-hidden': !node.visible
+    }">
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * 16 + 'px' }"
       @click="handleExpandIconClick">
@@ -124,7 +128,9 @@
       },
 
       handleClick() {
-        this.tree.currentNode = this;
+        const store = this.tree.store;
+        store.setCurrentNode(this.node);
+        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
       },
 
       handleExpandIconClick(event) {

packages/tree/src/tree.vue

@@ -58,6 +58,7 @@
         default: false
       },
       highlightCurrent: Boolean,
+      currentNodeKey: [String, Number],
       load: Function,
       filterNodeMethod: Function
     },
@@ -71,6 +72,7 @@
         lazy: this.lazy,
         props: this.props,
         load: this.load,
+        currentNodeKey: this.currentNodeKey,
         checkStrictly: this.checkStrictly,
         defaultCheckedKeys: this.defaultCheckedKeys,
         defaultExpandedKeys: this.defaultExpandedKeys,
@@ -114,6 +116,9 @@
         this.store.defaultExpandedKeys = newVal;
         this.store.setDefaultExpandedKeys(newVal);
       },
+      currentNodeKey(newVal) {
+        this.store.setCurrentNodeKey(newVal);
+      },
       data(newVal) {
         this.store.setData(newVal);
       }

test/unit/specs/tree.spec.js

@@ -94,6 +94,20 @@ describe('Tree', () => {
     }, DELAY);
   });
 
+  it('current change', done => {
+    vm = getTreeVm(':props="defaultProps" @current-change="handleCurrentChange"', {
+      methods: {
+        handleCurrentChange(data) {
+          this.currentNode = data;
+        }
+      }
+    });
+    const firstNode = vm.$el.querySelector('.el-tree-node__content');
+    firstNode.click();
+    expect(vm.currentNode.label).to.equal('一级 1');
+    done();
+  });
+
   it('emptyText', (done) => {
     vm = getTreeVm(':props="defaultProps"');
     vm.data = [];
@@ -113,6 +127,16 @@ describe('Tree', () => {
     });
   });
 
+  it('current-node-key', done => {
+    vm = getTreeVm(':props="defaultProps" :current-node-key="1"');
+    const firstNode = document.querySelector('.el-tree-node');
+    firstNode.click();
+    vm.$nextTick(() => {
+      expect(firstNode.classList.contains('is-current')).to.true;
+      done();
+    });
+  });
+
   it('defaultExpandAll', () => {
     vm = getTreeVm(':props="defaultProps" default-expand-all');
     expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(ALL_NODE_COUNT);