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 |
|
| highlight-current | whether current node is highlighted | boolean | - | false |
|
||||||
| current-node-key | key of current node, a set only prop | string, number | - | - |
|
| 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 |
|
| 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 |
|
| 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 | — | — |
|
| default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
|
||||||
| show-checkbox | whether node is selectable | boolean | — | false |
|
| show-checkbox | whether node is selectable | boolean | — | false |
|
||||||
|
|
|
@ -238,6 +238,7 @@
|
||||||
| highlight-current | 是否高亮当前选中节点,默认值是 false。| boolean | - | false |
|
| highlight-current | 是否高亮当前选中节点,默认值是 false。| boolean | - | false |
|
||||||
| current-node-key | 当前选中节点的 key,是一个只写属性 | string, number | - | - |
|
| current-node-key | 当前选中节点的 key,是一个只写属性 | string, number | - | - |
|
||||||
| default-expand-all | 是否默认展开所有节点 | boolean | - | false |
|
| default-expand-all | 是否默认展开所有节点 | boolean | - | false |
|
||||||
|
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | - | false |
|
||||||
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
|
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
|
||||||
| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
|
| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
|
||||||
| show-checkbox | 节点是否可被选择 | boolean | — | false |
|
| show-checkbox | 节点是否可被选择 | boolean | — | false |
|
||||||
|
|
|
@ -8,10 +8,10 @@
|
||||||
'is-hidden': !node.visible
|
'is-hidden': !node.visible
|
||||||
}">
|
}">
|
||||||
<div class="el-tree-node__content"
|
<div class="el-tree-node__content"
|
||||||
:style="{ 'padding-left': (node.level - 1) * 16 + 'px' }"
|
:style="{ 'padding-left': (node.level - 1) * 16 + 'px' }">
|
||||||
@click="handleExpandIconClick">
|
|
||||||
<span
|
<span
|
||||||
class="el-tree-node__expand-icon"
|
class="el-tree-node__expand-icon"
|
||||||
|
@click.stop="handleExpandIconClick"
|
||||||
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
|
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
|
||||||
</span>
|
</span>
|
||||||
<el-checkbox
|
<el-checkbox
|
||||||
|
@ -131,19 +131,19 @@
|
||||||
const store = this.tree.store;
|
const store = this.tree.store;
|
||||||
store.setCurrentNode(this.node);
|
store.setCurrentNode(this.node);
|
||||||
this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
|
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) {
|
handleExpandIconClick(event) {
|
||||||
let target = event.target;
|
|
||||||
if (target.tagName.toUpperCase() !== 'DIV' &&
|
|
||||||
target.parentNode.nodeName.toUpperCase() !== 'DIV' ||
|
|
||||||
target.nodeName.toUpperCase() === 'LABEL') return;
|
|
||||||
if (this.expanded) {
|
if (this.expanded) {
|
||||||
this.node.collapse();
|
this.node.collapse();
|
||||||
} else {
|
} else {
|
||||||
this.node.expand();
|
this.node.expand();
|
||||||
}
|
}
|
||||||
this.tree.$emit('node-click', this.node.data, this.node, this);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleUserClick() {
|
handleUserClick() {
|
||||||
|
|
|
@ -33,6 +33,10 @@
|
||||||
nodeKey: String,
|
nodeKey: String,
|
||||||
checkStrictly: Boolean,
|
checkStrictly: Boolean,
|
||||||
defaultExpandAll: Boolean,
|
defaultExpandAll: Boolean,
|
||||||
|
expandOnClickNode: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
autoExpandParent: {
|
autoExpandParent: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
|
|
@ -119,10 +119,20 @@ describe('Tree', () => {
|
||||||
|
|
||||||
it('highlight current', done => {
|
it('highlight current', done => {
|
||||||
vm = getTreeVm(':props="defaultProps" highlight-current');
|
vm = getTreeVm(':props="defaultProps" highlight-current');
|
||||||
const firstNode = document.querySelector('.el-tree-node__content');
|
const firstNode = document.querySelector('.el-tree-node');
|
||||||
firstNode.click();
|
firstNode.click();
|
||||||
vm.$nextTick(() => {
|
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();
|
done();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue