2016-11-10 13:46:55 +00:00
< script >
var data = [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1'
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1'
}, {
label: 'Level two 2-2'
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1'
}, {
label: 'Level two 3-2'
}]
}];
var regions = [{
'name': 'region1'
}, {
'name': 'region2'
}];
var count = 1;
var props = {
label: 'name',
children: 'zones',
icon(data, node) {
if (node.isLeaf) {
return 'el-icon-close';
}
return 'el-icon-search';
}
};
var defaultProps = {
children: 'children',
label: 'label'
};
export default {
methods: {
2016-11-13 14:00:55 +00:00
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
2016-11-10 13:46:55 +00:00
loadNode(node, resolve) {
if (node.level === -1) {
2016-11-13 14:00:55 +00:00
return resolve([{ name: 'region1' }, { name: 'region2' }]);
2016-11-10 13:46:55 +00:00
}
if (node.level > 4) return resolve([]);
var hasChild;
2016-11-13 14:00:55 +00:00
if (node.data.name === 'region1') {
2016-11-10 13:46:55 +00:00
hasChild = true;
2016-11-13 14:00:55 +00:00
} else if (node.data.name === 'region2') {
2016-11-10 13:46:55 +00:00
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(function() {
var data;
if (hasChild) {
data = [{
name: 'zone' + count++
}, {
name: 'zone' + count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
}
},
data() {
return {
data,
regions,
defaultProps,
props
};
}
};
< / script >
## Tree
2016-11-13 14:00:55 +00:00
Display a set of data with hierarchies.
2016-11-10 13:46:55 +00:00
2016-11-13 14:00:55 +00:00
### Basic usage
2016-11-10 13:46:55 +00:00
2016-11-13 14:00:55 +00:00
Basic tree structure.
2016-11-10 13:46:55 +00:00
::: demo
```html
2016-11-13 14:00:55 +00:00
< el-tree :data = "data" :props = "defaultProps" @node -click = "handleNodeClick" ></ el-tree >
2016-11-10 13:46:55 +00:00
< script >
export default {
data() {
return {
data: [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1'
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1'
}, {
label: 'Level two 2-2'
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1'
}, {
label: 'Level two 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
2016-11-13 14:00:55 +00:00
},
methods: {
handleNodeClick(data) {
console.log(data);
}
2016-11-10 13:46:55 +00:00
}
};
< / script >
```
:::
2016-11-13 14:00:55 +00:00
### Selectable
2016-11-10 13:46:55 +00:00
2016-11-13 14:00:55 +00:00
Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.
2016-11-10 13:46:55 +00:00
::: demo
```html
2016-11-13 14:00:55 +00:00
< el-tree
:data="regions"
:props="props"
:load="loadNode"
lazy
show-checkbox
@check -change="handleCheckChange">
< / el-tree >
2016-11-10 13:46:55 +00:00
< script >
export default {
data() {
return {
regions: [{
'name': 'region1'
}, {
'name': 'region2'
}],
props: {
label: 'name',
children: 'zones'
},
count: 1
};
},
methods: {
2016-11-13 14:00:55 +00:00
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
2016-11-10 13:46:55 +00:00
},
loadNode(node, resolve) {
if (node.level === -1) {
2016-11-13 14:00:55 +00:00
return resolve([{ name: 'region1' }, { name: 'region2' }]);
2016-11-10 13:46:55 +00:00
}
if (node.level > 4) return resolve([]);
2016-11-13 14:00:55 +00:00
var hasChild;
if (node.data.name === 'region1') {
hasChild = true;
} else if (node.data.name === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
2016-11-10 13:46:55 +00:00
setTimeout(() => {
var data;
if (hasChild) {
data = [{
name: 'zone' + this.count++
}, {
name: 'zone' + this.count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
}
}
};
< / script >
```
:::
### Attributes
2016-11-13 14:00:55 +00:00
| Attribute | Description | Type | Accepted Values | Default |
2016-11-10 13:46:55 +00:00
|---------- |-------------- |---------- |-------------------------------- |-------- |
2016-11-13 14:00:55 +00:00
| data | tree data | array | — | — |
| props | configuration options, see the following table | object | — | — |
| load | method for loading subtree data | function(node, resolve) | — | — |
| show-checkbox | whether node is selectable | boolean | — | false |
| render-content | render function for tree node | Function(h, { node } | - | - |
| highlight-current | whether current node is highlighted | boolean | - | false |
2016-11-10 13:46:55 +00:00
### props
2016-11-13 14:00:55 +00:00
| Attribute | Description | Type | Accepted Values | Default |
2016-11-10 13:46:55 +00:00
|---------- |-------------- |---------- |-------------------------------- |-------- |
2016-11-13 14:00:55 +00:00
| label | specify which key of node object is used as the node's label | string | — | — |
| children | specify which key of node object is used as the node's subtree | string | — | — |
2016-11-10 13:46:55 +00:00
### Method
`Tree` has the following method, which returns the currently selected array of nodes.
2016-11-13 14:00:55 +00:00
| Method | Description | Parameters |
2016-11-10 13:46:55 +00:00
|---------- |-------- |---------- |
2016-11-13 14:00:55 +00:00
| getCheckedNodes | If the node can be selected (`show-checkbox` is `true` ), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false` . < br > If the parameter is `true` , it only returns the currently selected array of sub-nodes.|
2016-11-10 13:46:55 +00:00
### Events
2016-11-13 14:00:55 +00:00
| Event Name | Description | Parameters |
2016-11-10 13:46:55 +00:00
|---------- |-------- |---------- |
2016-11-13 14:00:55 +00:00
| node-click | triggers when a node is clicked | three parameters: < br > node object corresponding to the node clicked, < br > `node` property of TreeNode, < br > TreeNode itself |
| check-change | triggers when the selected state of the node changes | three parameters: < br > node object corresponding to the node whose selected state is changed, < br > whether the node is selected, < br > whether node's subtree has selected nodes |
2016-11-10 13:46:55 +00:00