diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index 854bda333..c467d0030 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -243,6 +243,8 @@ Used for node selection. In the following example, data for each layer is acquir |---------- |-------- |---------- | | 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. | ### Events | Event Name | Description | Parameters | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index b3f8550d1..ababe2052 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -253,8 +253,10 @@ `Tree` 拥有如下方法，返回目前被选中的节点数组： | 方法名 | 说明 | 参数 | |------|--------|------| -| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），
则返回目前被选中的节点所组成的数组 | 接收一个 boolean 类型的参数，若为 `true` 则
仅返回被选中的叶子节点，默认值为 `false` | -| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-keys 属性 | 接收勾选节点数据的数组 | +| 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` | ### Events | 事件名称 | 说明 | 回调参数 | diff --git a/packages/tree/src/model/tree.js b/packages/tree/src/model/tree.js index 2c73f8510..414e8a132 100644 --- a/packages/tree/src/model/tree.js +++ b/packages/tree/src/model/tree.js @@ -66,7 +66,8 @@ export default class Tree { const key = this.key; if (!key || !node || !node.data) return; - this.nodesMap[node.key] = node; + const nodeKey = node.key; + if (nodeKey) this.nodesMap[node.key] = node; } deregisterNode(node) { @@ -95,13 +96,21 @@ export default class Tree { return checkedNodes; } - setCheckedNodes(array) { + getCheckedKeys(leafOnly) { const key = this.key; - const checkedKeys = {}; - array.forEach((item) => { - checkedKeys[(item || {})[key]] = true; + const allNodes = this._getAllNodes(); + const keys = []; + allNodes.forEach((node) => { + if (!leafOnly || (leafOnly && node.isLeaf)) { + if (node.checked) { + keys.push((node.data || {})[key]); + } + } }); + return keys; + } + _getAllNodes() { const allNodes = []; const nodesMap = this.nodesMap; for (let nodeKey in nodesMap) { @@ -110,9 +119,37 @@ export default class Tree { } } + return allNodes; + } + + _setCheckedKeys(key, leafOnly, checkedKeys) { + const allNodes = this._getAllNodes(); + allNodes.sort((a, b) => a.level > b.level ? -1 : 1); allNodes.forEach((node) => { - node.setChecked(!!checkedKeys[(node.data || {})[key]], !this.checkStrictly); + if (!leafOnly || (leafOnly && node.isLeaf)) { + node.setChecked(!!checkedKeys[(node.data || {})[key]], !this.checkStrictly); + } }); } + + setCheckedNodes(array, leafOnly = true) { + const key = this.key; + const checkedKeys = {}; + array.forEach((item) => { + checkedKeys[(item || {})[key]] = true; + }); + + this._setCheckedKeys(key, leafOnly, checkedKeys); + } + + setCheckedKeys(keys, leafOnly = true) { + const key = this.key; + const checkedKeys = {}; + keys.forEach((key) => { + checkedKeys[key] = true; + }); + + this._setCheckedKeys(key, leafOnly, checkedKeys); + } }; diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue index 8baf16d29..db6bcd8d0 100644 --- a/packages/tree/src/tree.vue +++ b/packages/tree/src/tree.vue @@ -112,9 +112,16 @@ getCheckedNodes(leafOnly) { return this.tree.getCheckedNodes(leafOnly); }, - setCheckedNodes(nodes) { + getCheckedKeys(leafOnly) { + return this.tree.getCheckedKeys(leafOnly); + }, + setCheckedNodes(nodes, leafOnly) { if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes'); - this.tree.setCheckedNodes(nodes); + this.tree.setCheckedNodes(nodes, leafOnly); + }, + setCheckedKeys(keys, leafOnly) { + if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes'); + this.tree.setCheckedKeys(keys, leafOnly); } } }; diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js index 02b16883d..ecb602538 100644 --- a/test/unit/specs/tree.spec.js +++ b/test/unit/specs/tree.spec.js @@ -186,7 +186,6 @@ describe('Tree', () => { const tree = vm.$children[0]; const secondNode = document.querySelectorAll('.el-tree-node__content')[3]; const nodeCheckbox = secondNode.querySelector('.el-checkbox'); - expect(nodeCheckbox).to.be.exist; nodeCheckbox.click(); expect(tree.getCheckedNodes().length).to.equal(3); expect(tree.getCheckedNodes(true).length).to.equal(2); @@ -197,6 +196,22 @@ describe('Tree', () => { }); }); + it('setCheckedKeys', () => { + vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"'); + const tree = vm.$children[0]; + tree.setCheckedKeys([111]); + expect(tree.getCheckedNodes().length).to.equal(3); + expect(tree.getCheckedKeys().length).to.equal(3); + }); + + it('setCheckedKeys with leafOnly=false', () => { + vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"'); + const tree = vm.$children[0]; + tree.setCheckedKeys([1, 11, 111, 2], false); + expect(tree.getCheckedNodes().length).to.equal(6); + expect(tree.getCheckedKeys().length).to.equal(6); + }); + it('check strictly', (done) => { vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly'); const tree = vm.$children[0];