mirror of https://github.com/ElemeFE/element
Tree: add expand-on-click-node prop. (#1805)
parent
1ba0745f00
commit
40f9d83f87
|
@ -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 |
|
||||
|
|
|
@ -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 |
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -33,6 +33,10 @@
|
|||
nodeKey: String,
|
||||
checkStrictly: Boolean,
|
||||
defaultExpandAll: Boolean,
|
||||
expandOnClickNode: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoExpandParent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue