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

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);
+  });
 });