Tree: add checkOnClickNode (#11111)

examples/docs/en-US/tree.md

@@ -1174,7 +1174,8 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 | render-content        | render function for tree node            | Function(h, { node, data, store }        | —               | —       |
 | highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |
 | 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            |         |
+| 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. | boolean | — | true |
+| check-on-click-node   | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | — | false |
 | 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   |

examples/docs/es/tree.md

@@ -1174,7 +1174,8 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 | render-content        | Función de renderizado para los nodos    | Function(h, { node, data, store } | —                 | —           |
 | highlight-current     | Si el nodo actual está resaltado         | boolean                           | —                 | false       |
 | default-expand-all    | Expandir todos los nodos por defecto     | boolean                           | —                 | false       |
-| expand-on-click-node  | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | —                                 | true              | -           |
+| expand-on-click-node  | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | boolean | — | true |
+| check-on-click-node   | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | — | false |
 | auto-expand-parent    | Expandir un nodo padre si el hijo está seleccionado | boolean                           | —                 | true        |
 | default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array                             | —                 | —           |
 | show-checkbox         | Si un nodo es seleccionable              | boolean                           | —                 | false       |

examples/docs/zh-CN/tree.md

@@ -1194,6 +1194,7 @@
 | highlight-current     | 是否高亮当前选中节点，默认值是 false。             | boolean                     | —    | false |
 | default-expand-all    | 是否默认展开所有节点                               | boolean                     | —    | false |
 | expand-on-click-node  | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean                     | —    | true  |
+| check-on-click-node   | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean                     | —    | false |
 | auto-expand-parent    | 展开子节点的时候是否自动展开父节点                 | boolean                     | —    | true  |
 | default-expanded-keys | 默认展开的节点的 key 的数组                        | array                       | —    | —     |
 | show-checkbox         | 节点是否可被选择                                   | boolean                     | —    | false |

packages/tree/src/tree-node.vue

@@ -167,6 +167,11 @@
         if (this.tree.expandOnClickNode) {
           this.handleExpandIconClick();
         }
+        if (this.tree.checkOnClickNode) {
+          this.handleCheckChange(null, {
+            target: { checked: !this.node.checked }
+          });
+        }
         this.tree.$emit('node-click', this.node.data, this.node, this);
       },
 

packages/tree/src/tree.vue

@@ -83,6 +83,7 @@
         type: Boolean,
         default: true
       },
+      checkOnClickNode: Boolean,
       checkDescendants: {
         type: Boolean,
         default: false

test/unit/specs/tree.spec.js

@@ -177,17 +177,27 @@ describe('Tree', () => {
     const firstNode = document.querySelector('.el-tree-node');
     firstNode.click();
     vm.$nextTick(() => {
-      expect(firstNode.className.indexOf('is-current') !== -1);
+      expect(firstNode.className.indexOf('is-current')).to.not.equal(-1);
       done();
     });
   });
 
   it('expandOnNodeClick', done => {
-    vm = getTreeVm(':props="defaultProps" :expand-on-node-click="false"');
+    vm = getTreeVm(':props="defaultProps" :expand-on-click-node="false"');
     const firstNode = document.querySelector('.el-tree-node');
     firstNode.click();
     vm.$nextTick(() => {
-      expect(firstNode.className.indexOf('is-expanded') === -1);
+      expect(firstNode.className.indexOf('is-expanded')).to.equal(-1);
+      done();
+    });
+  });
+
+  it('checkOnNodeClick', done => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox check-on-click-node');
+    const firstNode = document.querySelector('.el-tree-node');
+    firstNode.click();
+    vm.$nextTick(() => {
+      expect(firstNode.querySelector('input').checked).to.true;
       done();
     });
   });

types/tree.d.ts

@@ -79,6 +79,9 @@ export declare class ElTree extends ElementUIComponent {
   /** 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. */
   expandOnClickNode: boolean
 
+  /** Whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. */
+  checkOnClickNode: boolean
+
   /** Whether to expand father node when a child node is expanded */
   autoExpandParent: boolean