Tree: add getCheckedKeys & setCheckedKeys API.

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`. <br>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`. <br>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`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/tree.md

@@ -253,8 +253,10 @@
 `Tree` 拥有如下方法，返回目前被选中的节点数组：
 | 方法名 | 说明 | 参数 |
 |------|--------|------|
-| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | 接收一个 boolean 类型的参数，若为 `true` 则<br>仅返回被选中的叶子节点，默认值为 `false` |
-| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-keys 属性 | 接收勾选节点数据的数组 |
+| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则<br>仅返回被选中的叶子节点，默认值为 `false` |
+| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
+| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），<br>则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `true` |
+| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，<br>若为 `true` 则仅设置叶子节点的选中状态，默认值为 `true` |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

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

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, leafOnly);
+      },
+      setCheckedKeys(keys, leafOnly) {
         if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
-        this.tree.setCheckedNodes(nodes);
+        this.tree.setCheckedKeys(keys, leafOnly);
       }
     }
   };

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];