适用于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} |