mirror of https://github.com/ElemeFE/element
[tree]:add node-expand and node-collapse event
parent
28b3883379
commit
edf2f914da
|
@ -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 |
|
| 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 |
|
| 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 |
|
| 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-expand | 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-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
|
||||||
|
|
||||||
|
|
|
@ -363,5 +363,6 @@
|
||||||
| node-click | 节点被点击时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
| node-click | 节点被点击时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
||||||
| check-change | 节点选中状态发生变化时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
|
| check-change | 节点选中状态发生变化时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
|
||||||
| current-change | 当前选中节点变化时触发的事件 | 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象 |
|
| current-change | 当前选中节点变化时触发的事件 | 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象 |
|
||||||
| node-open | 节点被展开时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
| node-expand | 节点被展开时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
||||||
| node-close | 节点被关闭时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
| node-collapse | 节点被关闭时触发的事件 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
||||||
|
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
v-for="child in node.childNodes"
|
v-for="child in node.childNodes"
|
||||||
:key="getNodeKey(child)"
|
:key="getNodeKey(child)"
|
||||||
:node="child"
|
:node="child"
|
||||||
@node-expand="handleChildNodeExpand(child)">
|
@node-expand="handleChildNodeExpand">
|
||||||
</el-tree-node>
|
</el-tree-node>
|
||||||
</div>
|
</div>
|
||||||
</collapse-transition>
|
</collapse-transition>
|
||||||
|
@ -146,10 +146,9 @@
|
||||||
|
|
||||||
handleExpandIconClick() {
|
handleExpandIconClick() {
|
||||||
if (this.expanded) {
|
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();
|
this.node.collapse();
|
||||||
} else {
|
} else {
|
||||||
this.tree.$emit('node-open', this.node.data, this.node, this);
|
|
||||||
this.node.expand();
|
this.node.expand();
|
||||||
this.$emit('node-expand', this.node.data, this.node, this);
|
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.broadcast('ElTreeNode', 'tree-node-expand', node);
|
||||||
|
this.tree.$emit('node-expand', nodeData, node, instance);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -143,6 +143,7 @@
|
||||||
},
|
},
|
||||||
handleNodeExpand(nodeData, node, instance) {
|
handleNodeExpand(nodeData, node, instance) {
|
||||||
this.broadcast('ElTreeNode', 'tree-node-expand', node);
|
this.broadcast('ElTreeNode', 'tree-node-expand', node);
|
||||||
|
this.$emit('node-expand', nodeData, node, instance);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -371,7 +371,7 @@ describe('Tree', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('handleNodeOpen & handleNodeClose', (done) => {
|
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: {
|
methods: {
|
||||||
loadNode(node, resolve) {
|
loadNode(node, resolve) {
|
||||||
if (node.level === 0) {
|
if (node.level === 0) {
|
||||||
|
|
Loading…
Reference in New Issue