Jelajahi Sumber

[tree]:add node-expand and node-collapse event

张华焱 8 tahun lalu
induk
melakukan
8bf9c7d9ac

+ 2 - 2
examples/docs/en-US/tree.md

@@ -351,6 +351,6 @@ Only one node among the same level can be expanded at one time.
 | 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-open      | triggers when current node open          | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
-| node-close     | triggers when current node close         | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
+| 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 |
 

+ 3 - 2
examples/docs/zh-CN/tree.md

@@ -363,5 +363,6 @@
 | node-click     | 节点被点击时的回调      | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
 | check-change   | 节点选中状态发生变化时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
 | current-change | 当前选中节点变化时触发的事件 | 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象          |
-| node-open      | 节点被展开时触发的事件    | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
-| node-close     | 节点被关闭时触发的事件    | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
+| node-expand    | 节点被展开时触发的事件    | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
+| node-collapse  | 节点被关闭时触发的事件    | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
+

+ 4 - 4
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>
@@ -146,10 +146,9 @@
 
       handleExpandIconClick() {
         if (this.expanded) {
-          this.tree.$emit('node-close', this.node.data, this.node, this);
+          this.tree.$emit('node-collapse', this.node.data, this.node, this);
           this.node.collapse();
         } else {
-          this.tree.$emit('node-open', this.node.data, this.node, this);
           this.node.expand();
           this.$emit('node-expand', this.node.data, this.node, this);
         }
@@ -167,8 +166,9 @@
         }
       },
 
-      handleChildNodeExpand(node) {
+      handleChildNodeExpand(nodeData, node, instance) {
         this.broadcast('ElTreeNode', 'tree-node-expand', node);
+        this.tree.$emit('node-expand', nodeData, node, instance);
       }
     },
 

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

+ 1 - 1
test/unit/specs/tree.spec.js

@@ -371,7 +371,7 @@ describe('Tree', () => {
   });
 
   it('handleNodeOpen & handleNodeClose', (done) => {
-    vm = getTreeVm(':props="defaultProps" lazy :load="loadNode" @node-open="handleNodeOpen" @node-close="handleNodeClose"', {
+    vm = getTreeVm(':props="defaultProps" lazy :load="loadNode" @node-expand="handleNodeOpen" @node-collapse="handleNodeClose"', {
       methods: {
         loadNode(node, resolve) {
           if (node.level === 0) {