cloud-ui.vusion
Version:
Vusion Cloud UI
270 lines (227 loc) • 8.28 kB
Markdown
# TreeView
## Examples
### Basic
It is recommended to use data pattern to generate tags easily.
#### Tag Pattern
``` html
<u-tree-view>
<u-tree-view-node text="Node 1">
<u-tree-view-node text="Node 1.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2">
<u-tree-view-node text="Node 1.2.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2.2"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 1.3"></u-tree-view-node>
<u-tree-view-node text="Node 1.4"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 2"></u-tree-view-node>
<u-tree-view-node text="Node 3">
<u-tree-view-node text="Node 3.1"></u-tree-view-node>
<u-tree-view-node text="Node 3.2"></u-tree-view-node>
</u-tree-view-node>
</u-tree-view>
```
#### Data Pattern
``` html
<u-tree-view :data="[
{ text: 'Node 1', children: [
{ text: 'Node 1.1' },
{ text: 'Node 1.2', children: [
{ text: 'Node 1.2.1' },
{ text: 'Node 1.2.2' },
] },
{ text: 'Node 1.3' },
{ text: 'Node 1.4' },
] },
{ text: 'Node 2' },
{ text: 'Node 3', children: [
{ text: 'Node 3.1' },
{ text: 'Node 3.2' },
] },
]"></u-tree-view>
```
### Value
#### Tag Pattern
``` html
<u-tree-view value="1.2">
<u-tree-view-node text="Node 1" value="1">
<u-tree-view-node text="Node 1.1" value="1.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2" value="1.2">
<u-tree-view-node text="Node 1.2.1" value="1.2.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2.2" value="1.2.2"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 1.3" value="1.3"></u-tree-view-node>
<u-tree-view-node text="Node 1.4" value="1.4"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 2" value="2"></u-tree-view-node>
<u-tree-view-node text="Node 3" value="3">
<u-tree-view-node text="Node 3.1" value="3.1"></u-tree-view-node>
<u-tree-view-node text="Node 3.2" value="3.2"></u-tree-view-node>
</u-tree-view-node>
</u-tree-view>
```
#### Data Pattern
``` html
<u-tree-view value="1.2" :data="[
{ text: 'Node 1', value: '1', children: [
{ text: 'Node 1.1', value: '1.1' },
{ text: 'Node 1.2', value: '1.2', children: [
{ text: 'Node 1.2.1', value: '1.2.1' },
{ text: 'Node 1.2.2', value: '1.2.2' },
] },
{ text: 'Node 1.3', value: '1.3' },
{ text: 'Node 1.4', value: '1.4' },
] },
{ text: 'Node 2', value: '2' },
{ text: 'Node 3', value: '3', children: [
{ text: 'Node 3.1', value: '3.1' },
{ text: 'Node 3.2', value: '3.2' },
] },
]"></u-tree-view>
```
### Readonly & Disabled
#### Tag Pattern
``` html
<u-tree-view readonly>
<u-tree-view-node text="Node 1">
<u-tree-view-node text="Node 1.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2">
<u-tree-view-node text="Node 1.2.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2.2"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 1.3"></u-tree-view-node>
<u-tree-view-node text="Node 1.4"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 2"></u-tree-view-node>
<u-tree-view-node text="Node 3">
<u-tree-view-node text="Node 3.1"></u-tree-view-node>
<u-tree-view-node text="Node 3.2"></u-tree-view-node>
</u-tree-view-node>
</u-tree-view>
<u-tree-view disabled>
<u-tree-view-node text="Node 1">
<u-tree-view-node text="Node 1.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2">
<u-tree-view-node text="Node 1.2.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2.2"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 1.3"></u-tree-view-node>
<u-tree-view-node text="Node 1.4"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 2"></u-tree-view-node>
<u-tree-view-node text="Node 3">
<u-tree-view-node text="Node 3.1"></u-tree-view-node>
<u-tree-view-node text="Node 3.2"></u-tree-view-node>
</u-tree-view-node>
</u-tree-view>
<u-tree-view>
<u-tree-view-node text="Node 1">
<u-tree-view-node text="Node 1.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2" disabled>
<u-tree-view-node text="Node 1.2.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2.2"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 1.3" disabled></u-tree-view-node>
<u-tree-view-node text="Node 1.4"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 2" disabled></u-tree-view-node>
<u-tree-view-node text="Node 3">
<u-tree-view-node text="Node 3.1"></u-tree-view-node>
<u-tree-view-node text="Node 3.2"></u-tree-view-node>
</u-tree-view-node>
</u-tree-view>
```
#### Data Pattern
``` html
<u-tree-view :data="[
{ text: 'Node 1', children: [
{ text: 'Node 1.1' },
{ text: 'Node 1.2', disabled: true, children: [
{ text: 'Node 1.2.1' },
{ text: 'Node 1.2.2'}
] },
{ text: 'Node 1.3', disabled: true },
{ text: 'Node 1.4' },
] },
{ text: 'Node 2', disabled: true },
{ text: 'Node 3', children: [
{ text: 'Node 3.1' },
{ text: 'Node 3.2'}
]}
]"></u-tree-view>
```
### Cancelable
``` html
<u-tree-view cancelable>
<u-tree-view-node text="Node 1">
<u-tree-view-node text="Node 1.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2">
<u-tree-view-node text="Node 1.2.1"></u-tree-view-node>
<u-tree-view-node text="Node 1.2.2"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 1.3"></u-tree-view-node>
<u-tree-view-node text="Node 1.4"></u-tree-view-node>
</u-tree-view-node>
<u-tree-view-node text="Node 2"></u-tree-view-node>
<u-tree-view-node text="Node 3">
<u-tree-view-node text="Node 3.1"></u-tree-view-node>
<u-tree-view-node text="Node 3.2"></u-tree-view-node>
</u-tree-view-node>
</u-tree-view>
```
## TreeView API
### Props/Attrs
| Prop/Attr | Type | Default | Description |
| --------- | ---- | ------- | ----------- |
| data | Array<{ text, value }> | | Pass a data list and no need to loop tags manually |
| value.sync, v-model | Any | | Value of selected item |
| field | String | `'text'` | Indicate which field to show text |
| cancelable | Boolean | `false` | Select twice to cancel |
| readonly | Boolean | `false` | Readonly |
| disabled | Boolean | `false` | Disabled |
### Slots
| Slot | Description |
| ---- | ----------- |
| (default) | |
### Events
#### @select
Emit when selecting an node.
| Property | Type | Description |
| -------- | ---- | ----------- |
| value | Any | Value of this node |
| node | Object | Node object of selected node |
| $node | TreeViewNode | Selected node |
#### @input
| Property | Type | Description |
| -------- | ---- | ----------- |
| value | Any | Value of this node |
#### @toggle
Emit when expanding or collapsing this node.
| Property | Type | Description |
| -------- | ---- | ----------- |
| expanded | Boolean | Expanded or Collapsed |
| $node | TreeViewNode | Node to toggle |
## ListViewItem API
### Props/Attrs
| Prop/Attr | Type | Default | Description |
| --------- | ---- | ------- | ----------- |
| value | Any | | Value of this item |
| expanded.sync | Any | | Value of this item |
| disabled | Boolean | `false` | Disabled |
### Slots
| Slot | Description |
| ---- | ----------- |
| (default) | |
### Events
#### @select
Emit when selecting an node.
| Property | Type | Description |
| -------- | ---- | ----------- |
| value | Any | Value of this node |
| node | Object | Object of this node |
| $node | TreeViewNode | This node |
#### @toggle
Emit when expanding or collapsing this node.
| Property | Type | Description |
| -------- | ---- | ----------- |
| expanded | Boolean | Expanded or Collapsed |