mirror of https://github.com/ElemeFE/element
Tree: add checkOnClickNode (#11111)
parent
1ff01a77f9
commit
68db03fc22
|
@ -1174,7 +1174,8 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
|
|||
| render-content | render function for tree node | Function(h, { node, data, store } | — | — |
|
||||
| highlight-current | whether current node is highlighted | 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 | |
|
||||
| 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. | boolean | — | true |
|
||||
| check-on-click-node | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | — | false |
|
||||
| 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 |
|
||||
|
|
|
@ -1174,7 +1174,8 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
|
|||
| render-content | Función de renderizado para los nodos | Function(h, { node, data, store } | — | — |
|
||||
| highlight-current | Si el nodo actual está resaltado | boolean | — | false |
|
||||
| default-expand-all | Expandir todos los nodos por defecto | boolean | — | false |
|
||||
| expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | — | true | - |
|
||||
| expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | boolean | — | true |
|
||||
| check-on-click-node | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | — | false |
|
||||
| auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true |
|
||||
| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — |
|
||||
| show-checkbox | Si un nodo es seleccionable | boolean | — | false |
|
||||
|
|
|
@ -1194,6 +1194,7 @@
|
|||
| highlight-current | 是否高亮当前选中节点,默认值是 false。 | boolean | — | false |
|
||||
| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
|
||||
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true |
|
||||
| check-on-click-node | 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。 | boolean | — | false |
|
||||
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
|
||||
| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
|
||||
| show-checkbox | 节点是否可被选择 | boolean | — | false |
|
||||
|
|
|
@ -167,6 +167,11 @@
|
|||
if (this.tree.expandOnClickNode) {
|
||||
this.handleExpandIconClick();
|
||||
}
|
||||
if (this.tree.checkOnClickNode) {
|
||||
this.handleCheckChange(null, {
|
||||
target: { checked: !this.node.checked }
|
||||
});
|
||||
}
|
||||
this.tree.$emit('node-click', this.node.data, this.node, this);
|
||||
},
|
||||
|
||||
|
|
|
@ -83,6 +83,7 @@
|
|||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkOnClickNode: Boolean,
|
||||
checkDescendants: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
@ -177,17 +177,27 @@ describe('Tree', () => {
|
|||
const firstNode = document.querySelector('.el-tree-node');
|
||||
firstNode.click();
|
||||
vm.$nextTick(() => {
|
||||
expect(firstNode.className.indexOf('is-current') !== -1);
|
||||
expect(firstNode.className.indexOf('is-current')).to.not.equal(-1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('expandOnNodeClick', done => {
|
||||
vm = getTreeVm(':props="defaultProps" :expand-on-node-click="false"');
|
||||
vm = getTreeVm(':props="defaultProps" :expand-on-click-node="false"');
|
||||
const firstNode = document.querySelector('.el-tree-node');
|
||||
firstNode.click();
|
||||
vm.$nextTick(() => {
|
||||
expect(firstNode.className.indexOf('is-expanded') === -1);
|
||||
expect(firstNode.className.indexOf('is-expanded')).to.equal(-1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('checkOnNodeClick', done => {
|
||||
vm = getTreeVm(':props="defaultProps" show-checkbox check-on-click-node');
|
||||
const firstNode = document.querySelector('.el-tree-node');
|
||||
firstNode.click();
|
||||
vm.$nextTick(() => {
|
||||
expect(firstNode.querySelector('input').checked).to.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -79,6 +79,9 @@ export declare class ElTree extends ElementUIComponent {
|
|||
/** 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. */
|
||||
expandOnClickNode: boolean
|
||||
|
||||
/** Whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. */
|
||||
checkOnClickNode: boolean
|
||||
|
||||
/** Whether to expand father node when a child node is expanded */
|
||||
autoExpandParent: boolean
|
||||
|
||||
|
|
Loading…
Reference in New Issue