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

pull/1846/head
FuryBean 2016-12-19 15:38:51 +08:00 committed by cinwell.li
parent 1ba0745f00
commit 40f9d83f87
5 changed files with 25 additions and 9 deletions

View File

@ -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 |

View File

@ -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 |

View File

@ -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() {

View File

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

View File

@ -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(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();
});
});