### 基本用法有两种书写方式，这里推荐使用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% } ```