适用于Vue.js 2应用程序的强大，灵活，高度可定制的树组件。
安装和下载：
# NPM
$ npm install vue-tree-halower --save
Node 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| id | 当这个属性为空，title属性将作为key | String | Y | — |
| title | 节点名称 | String | N | — |
| expanded | 节点是否展开 | Boolean | Y | false |
| checked | 节点复选框是否选中 | Boolean | Y | false |
| halfcheck | 节点是否为半选（下级被选中） | Boolean | Y | false |
| visible | 节点是否可见 | Boolean | Y | true |
| selected | 节点是否被选中 | Boolean | Y | false |
| children | 子节点 | Array[Object] | Y | — |
| async | 是否异步加载子节点 | Boolean | Y | false |
| loading | 开启加载效果 | Boolean | Y | false |
| nocheck | 多复选框开启时指定某一节点不渲染复选框 | Boolean | Y | false |
| chkDisabled | 禁用某一结点的复选框的功能 | Boolean | Y | false |
| hasExpanded | 某一结点是否已经展开过(之前错误拼写成了hasExpended) | Boolean | Y | false |
| parent | 获取父节点(当allowGetParentNode=true时,增加parent方法,若父节点不存在时,会返回null)) | Function | – | undefined |
| selDisabled | 禁用某一结点的select的功能 | Boolean | Y | false |
Tree 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| data | 树数据源 | Array[Object] | N | — |
| multiple | 开启复选模式 | Boolean | Y | false |
| tpl | 自定义模板 | JSX | Y | false |
| halfcheck | 开启半选模式 | Boolean | Y | 全选 |
| scoped | 隔离节点选中状态 | Boolean | Y | false |
| draggable | 是否支持拖拽 | Boolean | Y | false |
| dragAfterExpanded | 拖拽后展开 | Boolean | Y | true |
| canDeleteRoot | 是否可以删除根节点 | Boolean | Y | false |
| maxLevel | 最大层级数 | Number | Y | 1024 |
| topMustExpand | 首层是否必须可展开 | Boolean | Y | true |
| allowGetParentNode | 是否允许节点获取父节点 | Boolean | Y | false |
| radio | selected 只允许单选 | Boolean | Y | false |
| selectAlone | select事件不影响checkbox | Boolean | Y | false |
方法
| 方法名 | 说明 | 参数 |
|---|
| getSelectedNodes | 返回目前被选中的节点所组成的数组,isOriginal:默认false, ignoreInvisibleNode:默认false | isOriginal: Boolean,ignoreInvisibleNode: Boolean |
| getCheckedNodes | 返回目前复选框选中的节点组成的数组 | isOriginal: Boolean,ignoreInvisibleNode: Boolean |
| getNodes | options: 可以包含一些过滤属性对象如{selected: true}，如果为空，请使用 {}; data: 数组,内容为[node,…],默认为传入的data数据;isOriginal:获取的数据是否保持原样,默认为false,会去掉children``hasExpanded``parent属性,ignoreInvisibleNode:忽略不可见节点,默认false | options: Object, data: Array,isOriginal: Boolean,ignoreInvisibleNode: Boolean |
| searchNodes | filter:function/string (如果是函数则最终会返回一个boolean类型);data:默认为this.data | filter:Function |
| nodeSelected | 选中节点方法 | node: Object |
| addNode | 增加节点 | parentNode: Object(不能为空), node: Object |
| addNodes | 增加多个节点 | parentNode: Object(不能为空), nodes: Array |
事件
| 事件名 | 说明 | 参数 |
|---|
| node-click | 单击节点触发的事件 | node: Object |
| node-select | 选择节点后触发的事件(和node-click是一样的)；position: 位置信息level：层级 | node: Object, selected: boolean, position: {level, index} |
| node-check | 点击checkbox触发事件 | node: Object, checked: boolean, position: {level, index} |
| node-mouse-over | 鼠标滑过节点触发事件 | node: Object, index: Number, parentNode: node, position: {level, index} |
| async-load-nodes | 用于实现异步加载 | node: Object |
| drag-node-end | 节点拖拽结束后触发事件 | {dragNode: Object, targetNode: Object} |
| del-node | 删除节点后触发事件 | { parentNode: Object |
| node-expand | expand触发事件 | node: Object, expand: boolean, position: {level, index} |
