From 93202ea32263f1718e4f839d48b7fd7b6fcd4a43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E5=8D=8E=E7=84=B1?= <448158404@qq.com> Date: Wed, 18 Jan 2017 17:57:07 +0800 Subject: [PATCH] [tree]:add node-open and node-close event --- examples/docs/en-US/tree.md | 80 +++++++++++++++++---------------- examples/docs/zh-CN/tree.md | 78 ++++++++++++++++---------------- packages/tree/src/tree-node.vue | 2 + test/unit/specs/tree.spec.js | 41 +++++++++++++++++ 4 files changed, 124 insertions(+), 77 deletions(-) diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index ef7a9c46f..2ce697a2b 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -74,7 +74,7 @@ } else { hasChild = Math.random() > 0.5; } - + setTimeout(function() { let data; if (hasChild) { @@ -86,12 +86,12 @@ } else { data = []; } - + resolve(data); }, 500); } }, - + data() { return { data, @@ -308,47 +308,49 @@ 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 | — | — | -| props | configuration options, see the following table | object | — | — | -| 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 | -| 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 | -| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false | -| default-checked-keys | array of keys of initially checked nodes | array | — | — | -| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — | -| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false | +| 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 | — | — | +| props | configuration options, see the following table | object | — | — | +| 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 | +| 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 | +| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false | +| default-checked-keys | array of keys of initially checked nodes | array | — | — | +| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — | +| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false | ### 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 | — | — | +| 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 | -| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes.| -| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | -| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. | +| 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 | +| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | +| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `true`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | +| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. | ### 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 | +| 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-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 | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index 26088c809..6f270bd51 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -86,7 +86,7 @@ } else { hasChild = Math.random() > 0.5; } - + setTimeout(function() { var data; if (hasChild) { @@ -98,12 +98,12 @@ } else { data = []; } - + resolve(data); }, 500); } }, - + data() { return { data, @@ -320,46 +320,48 @@ ::: ### Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -|---------- |-------------- |---------- |-------------------------------- |-------- | -| data | 展示数据 | array | — | — | -| empty-text | 内容为空的时候展示的文本 | String | — | — | -| node-key | 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的 | String | — | — | -| props | 配置选项，具体看下表 | object | — | — | -| 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 | -| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true | -| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true | -| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — | -| show-checkbox | 节点是否可被选择 | boolean | — | false | -| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false | -| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — | -| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — | -| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------------------- | ---------------------------------------- | --------------------------- | ---- | ----- | +| data | 展示数据 | array | — | — | +| empty-text | 内容为空的时候展示的文本 | String | — | — | +| node-key | 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的 | String | — | — | +| props | 配置选项，具体看下表 | object | — | — | +| 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 | +| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true | +| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true | +| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — | +| show-checkbox | 节点是否可被选择 | boolean | — | false | +| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false | +| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — | +| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — | +| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false | ### props -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -|---------- |-------------- |---------- |-------------------------------- |-------- | -| label | 指定节点标签为节点对象的某个属性值 | string | — | — | -| children | 指定子树为节点对象的某个属性值 | string | — | — | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------- | ----------------- | ------ | ---- | ---- | +| label | 指定节点标签为节点对象的某个属性值 | string | — | — | +| children | 指定子树为节点对象的某个属性值 | string | — | — | ### 方法 `Tree` 拥有如下方法，返回目前被选中的节点数组： -| 方法名 | 说明 | 参数 | -|------|--------|------| -| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 | +| 方法名 | 说明 | 参数 | +| --------------- | ---------------------------------------- | ---------------------------------------- | +| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 | | getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false` | -| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 | -| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` | -| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` | -| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false | +| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 | +| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` | +| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` | +| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false | ### Events -| 事件名称 | 说明 | 回调参数 | -|---------- |-------- |---------- | -| node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 | -| check-change | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 | -| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 | +| 事件名称 | 说明 | 回调参数 | +| -------------- | -------------- | ---------------------------------------- | +| node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 | +| check-change | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 | +| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 | +| node-open | 节点被展开时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 | +| node-close | 节点被关闭时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 | diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index b94dc6858..b5a569d21 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -146,8 +146,10 @@ handleExpandIconClick() { if (this.expanded) { + this.tree.$emit('node-close', 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); } diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js index a8213f5b3..f2a532729 100644 --- a/test/unit/specs/tree.spec.js +++ b/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-open="handleNodeOpen" @node-close="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); + }); });