Tree: add node-expand and node-collapse (#2507)

examples/docs/en-US/tree.md

@@ -309,7 +309,7 @@ Only one node among the same level can be expanded at one time.
 
 ### Attributes
 | Attribute             | Description                              | Type                        | Accepted Values | Default |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
+| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
 | data                  | tree data                                | array                       | —               | —       |
 | empty-text            | text displayed when data is void         | string                      | —               | —       |
 | node-key              | unique identity key name for nodes, its value should be unique across the whole tree | string                      | —               | —       |
@@ -319,7 +319,7 @@ Only one node among the same level can be expanded at one time.
 | 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 |
+| 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    |
 | default-expanded-keys | array of keys of initially expanded nodes | array                       | —               | —       |
 | show-checkbox         | whether node is selectable               | boolean                     | —               | false   |
@@ -330,14 +330,14 @@ Only one node among the same level can be expanded at one time.
 
 ### props
 | Attribute | Description                              | Type   | Accepted Values | Default |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
+| --------- | ---------------------------------------- | ------ | --------------- | ------- |
 | label     | specify which key of node object is used as the node's label | string | —               | —       |
 | children  | specify which key of node object is used as the node's subtree | string | —               | —       |
 
 ### Method
 `Tree` has the following method, which returns the currently selected array of nodes.
 | 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 |
 | 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          |
@@ -347,8 +347,10 @@ Only one node among the same level can be expanded at one time.
 
 ### Events
 | Event Name     | Description                              | Parameters                               |
-|---------- |-------- |---------- |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
 | 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 |
+| node-expand    | triggers when current node open          | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
+| node-collapse  | triggers when current node close         | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
 

examples/docs/zh-CN/tree.md

@@ -321,7 +321,7 @@
 
 ### Attributes
 | 参数                    | 说明                                       | 类型                          | 可选值  | 默认值   |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
+| --------------------- | ---------------------------------------- | --------------------------- | ---- | ----- |
 | data                  | 展示数据                                     | array                       | —    | —     |
 | empty-text            | 内容为空的时候展示的文本                             | String                      | —    | —     |
 | node-key              | 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的               | String                      | —    | —     |
@@ -342,14 +342,14 @@
 
 ### props
 | 参数       | 说明                | 类型     | 可选值  | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
+| -------- | ----------------- | ------ | ---- | ---- |
 | label    | 指定节点标签为节点对象的某个属性值 | string | —    | —    |
 | children | 指定子树为节点对象的某个属性值   | string | —    | —    |
 
 ### 方法
 `Tree` 拥有如下方法，返回目前被选中的节点数组：
 | 方法名             | 说明                                       | 参数                                       |
-|------|--------|------|
+| --------------- | ---------------------------------------- | ---------------------------------------- |
 | filter          | 对树节点进行筛选操作                               | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
 | getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false` |
 | setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性          | (nodes) 接收勾选节点数据的数组                      |
@@ -359,7 +359,10 @@
 
 ### Events
 | 事件名称           | 说明             | 回调参数                                     |
-|---------- |-------- |---------- |
+| -------------- | -------------- | ---------------------------------------- |
 | node-click     | 节点被点击时的回调      | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
 | check-change   | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
 | current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象          |
+| node-expand    | 节点被展开时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
+| node-collapse  | 节点被关闭时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
+

packages/tree/src/tree-node.vue

@@ -36,7 +36,7 @@
           v-for="child in node.childNodes"
           :key="getNodeKey(child)"
           :node="child"
-          @node-expand="handleChildNodeExpand(child)">
+          @node-expand="handleChildNodeExpand">
         </el-tree-node>
       </div>
     </collapse-transition>
@@ -145,7 +145,9 @@
       },
 
       handleExpandIconClick() {
+        if (this.node.isLeaf) return;
         if (this.expanded) {
+          this.tree.$emit('node-collapse', this.node.data, this.node, this);
           this.node.collapse();
         } else {
           this.node.expand();
@@ -165,8 +167,9 @@
         }
       },
 
-      handleChildNodeExpand(node) {
+      handleChildNodeExpand(nodeData, node, instance) {
         this.broadcast('ElTreeNode', 'tree-node-expand', node);
+        this.tree.$emit('node-expand', nodeData, node, instance);
       }
     },
 

packages/tree/src/tree.vue

@@ -143,6 +143,7 @@
       },
       handleNodeExpand(nodeData, node, instance) {
         this.broadcast('ElTreeNode', 'tree-node-expand', node);
+        this.$emit('node-expand', nodeData, node, instance);
       }
     },
 

test/unit/specs/tree.spec.js

@@ -369,4 +369,45 @@ describe('Tree', () => {
       }, DELAY);
     }, DELAY);
   });
+
+  it('handleNodeOpen & handleNodeClose', (done) => {
+    vm = getTreeVm(':props="defaultProps" lazy :load="loadNode" @node-expand="handleNodeOpen" @node-collapse="handleNodeClose"', {
+      methods: {
+        loadNode(node, resolve) {
+          if (node.level === 0) {
+            return resolve([{label: 'region1'}, {label: 'region2'}]);
+          }
+          if (node.level > 4) return resolve([]);
+          setTimeout(() => {
+            resolve([{
+              label: 'zone' + this.count++
+            }, {
+              label: 'zone' + this.count++
+            }]);
+          }, 50);
+        },
+        handleNodeOpen(data, node, vm) {
+          this.currentNode = data;
+          this.nodeExpended = true;
+        },
+        handleNodeClose(data, node, vm) {
+          this.currentNode = data;
+          this.nodeExpended = false;
+        }
+      }
+    });
+    const firstNode = document.querySelector('.el-tree-node__content');
+    expect(firstNode.nextElementSibling.childNodes.length).to.equal(0);
+    firstNode.click();
+    setTimeout(() => {
+      expect(vm.nodeExpended).to.equal(true);
+      expect(vm.currentNode.label).to.equal('region1');
+      firstNode.click();
+      setTimeout(() => {
+        expect(vm.nodeExpended).to.equal(false);
+        expect(vm.currentNode.label).to.equal('region1');
+        done();
+      }, 100);
+    }, 100);
+  });
 });