# Tree 树形控件
# Tree 概述
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
# Tree 代码演示
# 基础用法
最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
# 是否支持多选
multiple 是否支持多选
getCheckedNodes 获取被勾选的节点
getSelectedNodes 获取被选中的节点
# 是否显示多选框
show-checkbox 是否显示多选框
# 父子节点是否不联动
checkStrictly 父子节点不联动(只在显示多选框模式下使用)，不设置时默认联动
# 绑定事件
on-select-change 点击树节点时触发,返回当前已选中的节点数组
on-check-change 点击复选框时触发,返回当前已勾选节点的数组
on-toggle-expand 展开和收起子列表时触发,返回当前节点的数组
# 异步加载子节点
load-data 属性可以异步加载子节点，需要给数据增加 loading 来标识当前是否在加载中。
load-data 第一个参数为当前节点信息；执行 load-data 的第二个参数，将需要添加的数据传入。
如果某节点不包含 loading 和 children 字段，则不会应用异步加载效果。
# 自定义节点内容
使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加图标，按钮等
Render 函数的第二个参数，包含三个字段
root 树的根节点
node 当前节点
data 当前节点的数据
通过合理地使用 root node 和 data 可以实现各种效果，其中，HUI 给每个节点都设置了一个 nodeKey 字段，用来标识节点的 id。
Render 函数分两种，一种是给当前树的每个节点都设置同样的渲染内容，此 render 通过 Tree 组件的属性 render 传递；另一种是单独给某个节点设置，在该节点的 render 字段内设置；同时设置时，会优先使用当前节点的 Render 函数。
# 自动异步加载子节点
autoLoad 属性可以在组件初始化时自动异步加载子节点，需要给该节点上设置loading属性及load-data方法。
设置该节点leaf属性为true，则当前节点为叶子节点(忽略loading,children属性)
# 子节点分页
节点上设置 hasPage 属性为 true,同时设置 loading 及 load-data 方法，则可对其子节点进行分页
设置 currentPageInfo 传入当前节点分页信息:page 为当前页码,nodeKey 为当前节点 key
对于已经加载完数据的节点，展开时不重新加载，因此需要通过 on-select-change 来切换分页节点
同时添加 h-page 分页组件即可实现分页
# 树节点筛选显示
使用 filter-node-method 指定筛选用 的函数；调用 filter() 后将对每一个树节点执行 filter-node-method 传入的函数。当返回值为 true 时，代表通过筛选
# 展开/收缩树节点
通过 this.$refs.xxx.expand(status) 来对 tree 进行收缩和展开，传入 true 时展开，传入 false 时收缩
# Tree API
# Tree props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 可嵌套的节点属性的数组，生成 tree 的数据 | Array | [] |
| multiple | 是否支持多选(只支持树节点多选，与多选框无关) | Boolean | false |
| show-checkbox | 是否显示多选框(显示多选框) | Boolean | false |
| checkStrictly | 父子节点不联动(只在显示多选框模式下使用) | Boolean | false |
| showIndeterminate | 多选框是否不显示不确定性状态（只在多选框存在并且父子组件联动的情况下使用） | Boolean | false |
| load-data | 异步加载数据的方法，见示例 | Function | - |
| render | 自定义渲染内容，见示例 | Function | - |
| currentPageInfo | 当前分页信息，必须包含 page (当前页码)及 nodeKey (当前节点key) | Object | - |
| isAlwaysSelect | 重复点击某节点，是否总是选中当前节点，render 情况不可用，建议单选使用(此属性仅在v1.0.14或以上版本有效) | Boolean | false |
| isBoxRight | 将多选框显示在最右侧(此属性仅在v1.0.18或以上版本有效) | Boolean | false |
| selectToCheck | 支持点击文字选中勾选框，及点击文字和点击勾选框是一样的效果(此属性仅在v1.0.18或以上版本有效) | Boolean | false |
| notDeepCopy | 组件 data 属性传入组件中变量是否随组件内部修改而修改(此属性仅在v1.0.29或以上版本有效) | Boolean | false |
| onlyUpdateDown | 父子组件级联时只向下级联，不向上级联(v1.0.36) | Boolean | false |
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏。详情参考示例 其中参数 val 为 filter 函数传入的参数，data 为树的所有数据，node 为当前节点数据 （v1.0.51） | Function(val,data,node) | function(){return true} |
| titleMaxWidth | 设定每个节点的 title 文字最大宽度，当文本超出显示省略号，鼠标悬浮显示全部文本 （v1.0.83） | String|Number | - |
# Tree events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-select-change | 点击树节点时触发 | 返回两个参数，当前已选中的节点数组，当前操作的节点对象（v1.0.37） |
| on-check-change | 点击复选框时触发 | 返回两个参数，当前已勾选节点的数组,当前操作的节点对象（v1.0.37） |
| on-toggle-expand | 展开和收起子列表时触发 | |
| on-mouseover | 鼠标移到当前节点 title 上触发（v1.0.27） | 当前节点对象 |
| on-right-click | 鼠标右击当前节点 title 上触发（v1.0.50） | |
| on-double-click | 鼠标双击当前节点 title 上触发（v1.0.65） | 当前节点对象 |
# Tree methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| getCheckedNodes | 获取被勾选的节点，该方法在[1.0.17及其以上版本]支持内置参数 indeterminate[true或者false, 默认false] 来支持是否返回联动选中节点,即 indeterminate 为 true 节点 | 无 |
| getSelectedNodes | 获取被选中的节点 | 无 |
| nodeSelect(key,value,status)(此方法只在v1.0.15版本及以上有效) | key 为当前数据中每一项皆有的属性名，其属性值为唯一值不重复，value 为属性值，status 为选中状态默认为true | 无 |
| filterHighlight(val) | 根据 val 关键字，高亮搜索出来的节点（v1.0.32） | 无 |
| nodeCheck(key,value,status)(此方法只在v1.0.44版本及以上有效) | key 为当前数据中每一项皆有的属性名，其属性值为唯一值不重复，value 为属性值，status 为勾选状态默认为true | 无 |
| filter(val, childShow) | 用于筛选过滤树，配合使用 filter-node-method 传入的方法，对表格的每一项进行过滤。(v1.0.51) | val 表示过滤参数，将在 filter-node-method 传入的函数中作为第一个参数 childShow 参数，为 true 表示将匹配到节点的子节点全部返回（v1.0.62），默认 false |
| expandTree(status) | 内部提供的方法用于展开或者收缩树组件，传入一个参数 status，status 为 true 时展开树组件，status 为 false 时收缩树组件。 调用方式为 this.refs.xxx.expandTree(status) | status，为必填项，传入 true 时为展开，传入 false 时为收缩 |
# Tree children
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | String | - |
| expand | 是否展开直子节点 | Boolean | false |
| disabled | 禁掉响应(包括多选框和树节点；v1.0.46以上不禁用收缩展开) | Boolean | false |
| disableCheckbox | 禁掉 checkbox (只包括多选框不包括树节点) | Boolean | false |
| selected | 是否选中树节点 | Boolean | false |
| checked | 是否勾选(如果勾选且在父子树节点联动且当前节点为父树节点的情况下，子节点也会全部勾选) | Boolean | false |
| loading | 异步加载子节点数据(为 true 表示正在加载子节点数据，需设置 load-data) | Boolean | false |
| children | 子节点属性数组 | Array | - |
| leaf | 叶子节点属性，设置leaf后该节点为叶子节点(children,loading无效)(此属性只在1.0.10或以上版本有效) | Boolean | false |
| autoLoad | 需设置 loading 及 load-data 异步加载方法后设置 autoLoad 属性，可以在组件初始化时自动异步加载数据(此属性只在1.0.10或以上版本有效) | Boolean | false |
| hasPage | 需同时设置 loading、load-data 方法及 currentPageInfo，则可对其子节点进行分页(此属性只在1.0.10或以上版本有效) | Boolean | false |
# tree性能
不同节点个数加载时间
| # | 1000(个) | 2000(个) | 5000(个) | 10000(个) |
|---|---|---|---|---|
| 无render | 348ms | 364ms | 446ms | 588ms |
| 有render | 368ms | 423ms | 591ms | 892ms |
| 节点expanded | 1106ms | 1832ms | 4203ms | 8459ms |