github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tree: add checkOnClickNode (#11111)

pull/11113/head^2
杨奕 2018-05-10 18:01:49 +08:00 committed by GitHub
parent 1ff01a77f9
commit 68db03fc22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/docs/en-US/tree.md
View File

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

3
examples/docs/es/tree.md
View File

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

1
examples/docs/zh-CN/tree.md
View File

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

5
packages/tree/src/tree-node.vue
View File

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

1
packages/tree/src/tree.vue
View File

@ -83,6 +83,7 @@
type: Boolean,
default: true
},
checkOnClickNode: Boolean,
checkDescendants: {
type: Boolean,
default: false

16
test/unit/specs/tree.spec.js
View File

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

3
types/tree.d.ts vendored
View File

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