主题
Tree 树形控件
使用
用清晰的层级结构展示信息，可展开或折叠。
基础用法
基础的树形结构展示
可选择
适用于需要选择层级时使用。
本例还展示了动态加载节点数据的方法。
懒加载自定义叶子节点
由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点， 所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。 同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
多次懒加载
加载远程节点数据时，懒加载有时可能失败。 在这种情况下，您可以调用 reject 以保持节点状态，并允许远程加载继续。
禁用复选框
节点的复选框可以设置为禁用。
在示例中，通过 disabled 设置禁用状态。 相应的复选框已禁用，不能点击。
默认展开以及默认选中
树节点可以在初始化阶段被设置为展开和选中。
分别通过 default-expanded-keys 和 default-checked-keys 设置默认展开和默认选中的节点。 需要注意的是，此时必须设置 node-key， 其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
树节点的选择
本例展示如何获取和设置选中节点。 获取和设置各有两种方式：通过 node 或通过 key。 如果需要通过 key 来获取或设置，则必须设置 node-key。
自定义节点内容
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
可以通过两种方法进行树节点内容的自定义：render-content 和 scoped slot。 使用 render-content 指定渲染函数，该函数返回需要的节点区内容即可。 渲染函数的用法请参考 Vue 文档。 使用 scoped slot 会传入两个参数 node 和 data，分别表示当前节点的 Node 对象和当前节点的数据。 注意：由于 JSFiddle 不支持 JSX 语法，所以 render-content 示例无法在那里运行。 但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
自定义节点类名
节点的类名支持自定义。
使用 props.class 来建立节点的类名。
树节点过滤
树节点是可以被过滤的
调用 Tree 实例对象的 filter 方法来过滤树节点。 方法的参数就是过滤关键字。 需要注意的是，此时需要设置 filter-node-method 属性，其值为过滤函数。
手风琴模式
对于同一级的节点，每次只能展开一个
可拖拽节点
通过 draggable 属性可让节点变为可拖拽
自定义节点图标
通过icon，expand-icon，collapse-icon属性分别可以自定义叶子节点、展开节点、收起节点的图标。 如果有更复杂的需求场景，可以使用 icon-method 属性更灵活的自定义节点图标。该方法接受两个参数，分别是当前数据项以及当前节点，返回值可以返回一个图标名称或者图标组件，也可以返回一个对象，包含 icon 属性和 css 样式属性。
自定义叶子结点/展开结点/收起结点图标
使用 icon-method 属性自定义节点图标
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 展示数据 | object | - |
| empty-text | 内容为空的时候展示的文本 | string | - |
| node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | string | - |
| props | 配置选项，具体看下表 | object | - |
| render-after-expand | 是否在第一次展开某个树节点后才渲染其子节点 | boolean | true |
| load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | Function | - |
| render-content | 树节点的内容区的渲染 | Function | - |
| 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 的数组 | object | - |
| show-checkbox | 节点是否可被选择 | boolean | false |
| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | false |
| default-checked-keys | 默认勾选的节点的 key 的数组 | object | - |
| current-node-key | 当前选中的节点 | string / number | - |
| filter-node-method | 对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏 | Function | - |
| accordion | 是否每次只打开一个同级树节点展开 | boolean | false |
| indent | 相邻级节点间的水平缩进，单位为像素 | number | 18 |
| icon | 自定义叶子节点图标组件 | string / Component | - |
| expand-icon | 自定义展开节点图标组件 | string / Component | - |
| collapse-icon | 自定义关闭节点图标组件 | string / Component | - |
| show-arrow | 自定义是否显示隐藏节点箭头 | boolean | true |
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | false |
| draggable | 是否开启拖拽节点功能 | boolean | false |
| allow-drag | 判断节点能否被拖拽 如果返回 false ，节点不能被拖动 | Function | - |
| allow-drop | 拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function | - |
| icon-method | 自定义节点图标 | Function | - |
Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| node-click | 当节点被点击时触发 | Function |
| node-contextmenu | 当某一节点被右键点击时触发 | Function |
| check-change | 当复选框状态发生变化时触发 | Function |
| check | 点击节点复选框时触发 | Function |
| current-change | 当当前选中的节点发生变化时触发 | Function |
| node-expand | 当节点被展开时触发 | Function |
| node-collapse | 当节点被收起时触发 | Function |
| node-drag-start | 当节点开始拖拽时触发 | Function |
| node-drag-enter | 当拖拽节点进入其他节点时触发 | Function |
| node-drag-leave | 当拖拽节点离开某个节点时触发 | Function |
| node-drag-over | 在拖拽节点时触发 | Function |
| node-drag-end | 拖拽结束时触发，可能未成功完成 | Function |
| node-drop | 拖拽成功完成时触发 | Function |
TreeOptionProps
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| label | 指定节点标签为节点对象的某个属性值 | string | Function | - |
| children | 指定子树为节点对象的某个属性值 | string | - |
| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | string | Function | - |
| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | string | Function | - |
| class | 自定义节点类名 | string | Function | - |
Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| filter | 过滤所有树节点，过滤后的节点将被隐藏 | Function |
| updateKeyChildren | 为节点设置新数据，只有当设置 node-key 属性的时候才可用 | Function |
| getCheckedNodes | 如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组 | Function |
| setCheckedNodes | 设置目前勾选的节点，使用此方法必须提前设置 node-key 属性 | Function |
| getCheckedKeys | 若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组 | Function |
| setCheckedKeys | 设置目前选中的节点，使用此方法必须设置 node-key 属性 | Function |
| setChecked | 设置节点是否被选中, 使用此方法必须设置 node-key 属性 | Function |
| getHalfCheckedNodes | 如果节点可用被选中 (show-checkbox 为 true), 它将返回当前半选中的节点组成的数组 | Function |
| getHalfCheckedKeys | 若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组 | Function |
| getCurrentKey | 返回当前被选中节点的数据 (如果没有则返回 null) | Function |
| getCurrentNode | 返回当前被选中节点的数据 (如果没有则返回 null) | Function |
| setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | Function |
| setCurrentNode | 设置节点为选中状态，使用此方法必须设置 node-key 属性 | Function |
| getNode | 根据 data 或者 key 拿到 Tree 组件中的 node | Function |
| remove | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性 | Function |
| append | 为 Tree 中的一个节点追加一个子节点 | Function |
| insertBefore | 在 Tree 中给定节点前插入一个节点 | Function |
| insertAfter | 在 Tree 中给定节点后插入一个节点 | Function |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 自定义树节点的内容， 自定义树节点的内容 | - |
| empty | 当数据为空时自定义的内容 | - |