diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index b9180a884..a5c95d5fe 100644 --- a/examples/docs/en-US/tree.md +++ b/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 | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index 44254bb71..80af4d9d6 100644 --- a/examples/docs/zh-CN/tree.md +++ b/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 | diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index 45e6c2160..4200d7bae 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -8,10 +8,10 @@ 'is-hidden': !node.visible }">
+ :style="{ 'padding-left': (node.level - 1) * 16 + 'px' }"> { 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(getComputedStyle(firstNode)['background-color']).to.equal('rgb(239, 247, 255)'); + 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(firstNode.className.indexOf('is-expanded') === -1); done(); }); });