Tree: add expand-on-click-node prop. (#1805)

examples/docs/en-US/tree.md

@@ -226,6 +226,7 @@ Used for node selection. In the following example, data for each layer is acquir
 | 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 |

examples/docs/zh-CN/tree.md

@@ -238,6 +238,7 @@
 | highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | - | false |
 | current-node-key | 当前选中节点的 key，是一个只写属性 | string, number | - | - |
 | default-expand-all | 是否默认展开所有节点 | boolean | - | false |
+| expand-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

@@ -8,10 +8,10 @@
       'is-hidden': !node.visible
     }">
     <div class="el-tree-node__content"
-      :style="{ 'padding-left': (node.level - 1) * 16 + 'px' }"
-      @click="handleExpandIconClick">
+      :style="{ 'padding-left': (node.level - 1) * 16 + 'px' }">
       <span
         class="el-tree-node__expand-icon"
+        @click.stop="handleExpandIconClick"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
       </span>
       <el-checkbox
@@ -131,19 +131,19 @@
         const store = this.tree.store;
         store.setCurrentNode(this.node);
         this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
+        this.tree.currentNode = this;
+        if (this.tree.expandOnClickNode) {
+          this.handleExpandIconClick(event);
+        }
+        this.tree.$emit('node-click', this.node.data, this.node, this);
       },
 
       handleExpandIconClick(event) {
-        let target = event.target;
-        if (target.tagName.toUpperCase() !== 'DIV' &&
-          target.parentNode.nodeName.toUpperCase() !== 'DIV' ||
-          target.nodeName.toUpperCase() === 'LABEL') return;
         if (this.expanded) {
           this.node.collapse();
         } else {
           this.node.expand();
         }
-        this.tree.$emit('node-click', this.node.data, this.node, this);
       },
 
       handleUserClick() {

packages/tree/src/tree.vue

@@ -33,6 +33,10 @@
       nodeKey: String,
       checkStrictly: Boolean,
       defaultExpandAll: Boolean,
+      expandOnClickNode: {
+        type: Boolean,
+        default: true
+      },
       autoExpandParent: {
         type: Boolean,
         default: true

test/unit/specs/tree.spec.js

@@ -119,10 +119,20 @@ describe('Tree', () => {
 
   it('highlight current', done => {
     vm = getTreeVm(':props="defaultProps" highlight-current');
-    const firstNode = document.querySelector('.el-tree-node__content');
+    const firstNode = document.querySelector('.el-tree-node');
+    firstNode.click();
+    vm.$nextTick(() => {
+      expect(firstNode.className.indexOf('is-current') !== -1);
+      done();
+    });
+  });
+
+  it('expandOnNodeClick', done => {
+    vm = getTreeVm(':props="defaultProps" :expand-on-node-click="false"');
+    const firstNode = document.querySelector('.el-tree-node');
     firstNode.click();
     vm.$nextTick(() => {
-      expect(getComputedStyle(firstNode)['background-color']).to.equal('rgb(239, 247, 255)');
+      expect(firstNode.className.indexOf('is-expanded') === -1);
       done();
     });
   });