# UTreeView 树形视图
- [示例](#示例)
- [基本用法](#基本用法)
- [选项值](#选项值)
- [只读、禁用、禁用某一项](#只读-禁用-禁用某一项)
- [异步加载](#异步加载)
- [Tag 和 Data 混合](#tag-和-data-混合)
- [字段路径](#字段路径)
- [手风琴](#手风琴)
- [展开/折叠触发方式](#展开折叠触发方式)
- [可取消](#可取消)
- [节点显示/隐藏](#节点显示隐藏)
- [多选](#多选)
- [其他方法](#其他方法)
- [UTreeView API](#utreeview-api)
- [Props/Attrs](#propsattrs)
- [Slots](#slots)
- [Events](#events)
- [Methods](#methods)
- [UTreeViewNode API](#utreeviewnode-api)
- [Props/Attrs](#propsattrs-2)
- [Slots](#slots-2)
- [Events](#events-2)
**Selector**
树形视图
## 示例
### 基本用法
有两种书写方式，这里推荐使用Data方式，因为树型结构的数据有时非常多。
#### Tag 方式
``` html { width: 30% }
```
#### Data 方式
``` html { width: 30% }
```
#### 自定义模板
Tag 方式很容易自定义模板，而 Data 方式却不好扩展。我们提供了一个名为`text`的作用域插槽，可以很轻松地处理这个问题。
``` html { width: 30% }
{{ node.type === 'directory' ? (expanded ? '📂' : '📁') : '📄' }}
{{ text }}
```
但`text`作用域插槽只支持扩展 text 文本内容，如果你的需求更加复杂，建议直接通过继承 UTreeView 相关组件来实现。
### 选项值
#### Tag 方式
``` html { width: 30% }
```
#### Data 方式
``` html { width: 30% }
```
### 只读、禁用、禁用某一项
#### Tag 方式
``` html
```
#### Data 方式
``` html { width: 30% }
```
### 异步加载
``` vue { width: 30% }
```
### Tag 和 Data 混合
``` vue { width: 30% }
```
### 字段路径
``` vue { width: 30% }
```
### 手风琴
``` html { width: 30% }
```
### 展开/折叠触发方式
``` html
整行点击均可触发（默认）
仅点击小箭头时触发
```
### 可取消
``` html { width: 30% }
```
### 节点显示/隐藏
Tag 方式中可以使用`v-show`，Data 方式中可以使用`hidden`属性
``` html { width: 30% }
```
### 多选
通过`checkable`属性开启多选模式。
控制多选有两种方式，一种是设置数据各项的`checked`属性，该属性会与多项选择框进行双向绑定。`disabled`属性可以禁用多项选择框。
``` vue { width: 30% }
```
另一种是通过`:values.sync`对选择值进行双向绑定，该方法要求每项有`value`作为唯一值。`values`只会收集叶子节点的值。
``` vue { width: 30% }
```
通过 `check-controlled` 属性开启节点状态完全受控，父子不关联。
``` vue { width: 30% }
```
### 其他方法
#### 统一操作
UTreeView 有针对选中/取消和展开/收起两个操作的统一处理的方法：`checkAll`和`toggleAll`，方便开发者使用。
``` vue { width: 30% }
全部选中
全部取消
全部展开
全部收起
```
#### 遍历和查找
UTreeView 有关于遍历与查找节点的方法：`walk`和`find`，方便开发者使用。
``` vue { width: 30% }
遍历所有节点
查找末尾为`4`的节点
```
## UTreeView API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| data | Array\<{ text, value }\> | | | 集合类型变量或者输出参数为集合类型的逻辑 |
| text-field | string | | `'text'` | 集合的元素类型中，用于显示文本的属性名称 |
| value-field | string | | `'value'` | 集合的元素类型中，用于标识选中值的属性 |
| children-field | string | | `'value'` | 集合的元素类型中，用于标识父节点的属性 |
| value.sync, v-model | any | | | 单选后，选中的值 |
| checkable | boolean | | `false` | 是否开启多选模式，显示多选框 |
| cancelable | boolean | | `false` | 是否可以取消选择 |
| accordion | boolean | | `false` | 是否每次只会展开一个分组 |
| expand-trigger | string | `[object Object]`
`[object Object]` | `'click'` | 展开/折叠的触发方式 |
| readonly | boolean | | `false` | |
| disabled | boolean | | `false` | |
| check-controlled | boolean | | `false` | 父节点选中，子节点是否被选中，懒加载开启状态下无法全选关联 |
### Slots
#### (default)
插入``子组件
### Events
#### @before-select
选择某一项前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选择项的值 |
| $event.oldValue | any | 旧的值 |
| $event.node | object | 选择项相关对象 |
| $event.oldNode | object | 旧的选择项相关对象 |
| $event.nodeVM | UTreeViewNode | 选择项子组件 |
| $event.oldVM | UTreeViewNode | 旧的选择项子组件 |
| $event.preventDefault | Function | 阻止选择流程 |
| senderVM | UTreeView | 发送事件实例 |
#### @input
选择某一项时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | any | 选择项的值 |
| senderVM | UTreeView | 发送事件实例 |
#### @select
选择某一项时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 改变后的值 |
| $event.oldValue | any | 旧的值 |
| $event.node | object | 选择项相关对象 |
| $event.oldNode | object | 旧的选择项相关对象 |
| $event.nodeVM | UTreeViewNode | 选择项子组件 |
| $event.oldVM | UTreeViewNode | 旧的选择项子组件 |
| senderVM | UTreeView | 发送事件实例 |
#### @change
选择值改变时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选择项的值 |
| $event.oldValue | any | 旧的值 |
| $event.node | object | 选择项相关对象 |
| $event.oldNode | object | 旧的选择项相关对象 |
| $event.nodeVM | UTreeViewNode | 选择项子组件 |
| $event.oldVM | UTreeViewNode | 旧的选择项子组件 |
| senderVM | UTreeView | 发送事件实例 |
#### @toggle
展开/折叠某节点时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.expanded | boolean | 展开/折叠状态 |
| $event.node | object | 节点相关对象 |
| $event.nodeVM | UTreeViewNode | 节点组件 |
| senderVM | UTreeView | 发送事件实例 |
#### @check
选中/取消节点时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.checked | boolean | 选中/取消状态 |
| $event.oldChecked | boolean | 旧的选中/取消状态 |
| $event.values | Array | 所有选中节点的值 |
| $event.node | object | 节点相关对象 |
| $event.nodeVM | UTreeViewNode | 节点组件 |
| senderVM | UTreeView | 发送事件实例 |
Methods
#### walk(func)
广度优先遍历树。当`func`函数有返回值时，停止遍历。
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
| func | Function | | 遍历的处理函数 |
#### find(func)
查找节点实例。
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
| func | Function | | 查找函数。找到第一个返回值为`true`的实例。 |
#### toggleAll(expanded)
展开/折叠所有节点
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
| expanded | boolean | | 展开/折叠 |
#### checkAll(expanded)
选中/取消所有节点
| Param | Type | Default | Description |
| ----- | ---- | ------- | ----------- |
| expanded | boolean | | 选中/取消 |
## UTreeViewNode API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| value | any | | | 节点的值 |
| text | string | | | 节点的文本 |
| expanded.sync | boolean | | | 节点默认展开 |
| checked.sync | boolean | | | 是否可以选中/取消 |
| disabled | boolean | | `false` | |
| node | object | | | 当选择此节点时，抛出的事件会传递该对象，便于开发 |
### Slots
#### (default)
插入子节点
### Events
#### @before-select
选择此项前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event.value | any | 此项的值 |
| $event.node | object | 此项的相关对象 |
| $event.nodeVM | UTreeViewNode | 此组件 |
| $event.preventDefault | Function | 阻止选择流程 |
| senderVM | UTreeViewNode | 发送事件实例 |
#### @before-toggle
展开/折叠此节点前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event.expanded | boolean | 展开/折叠状态 |
| $event.node | object | 节点相关对象 |
| $event.nodeVM | UTreeViewNode | 节点组件 |
| $event.preventDefault | Function | 阻止展开/折叠流程 |
| senderVM | UTreeViewNode | 发送事件实例 |
#### @toggle
展开/折叠某节点时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event.expanded | boolean | 展开/折叠状态 |
| $event.node | object | 节点相关对象 |
| $event.nodeVM | UTreeViewNode | 节点组件 |
| senderVM | UTreeViewNode | 发送事件实例 |
#### @check
选中节点时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event.checked | boolean | 选中状态 |
| $event.oldChecked | boolean | 旧的选中状态 |
| $event.node | object | 节点相关对象 |
| $event.nodeVM | UTreeViewNode | 节点组件 |
| senderVM | UTreeViewNode | 发送事件实例 |