Vue.js 2的强大树组件 - vue-tree-halower

Vue.js 2的强大树组件 - vue-tree-halower
插件名称 vue-tree-halower
发布时间 2020年9月27日
插件作者 halower

适用于Vue.js 2应用程序的强大,灵活,高度可定制的树组件。

安装和下载:

# NPM
$ npm install vue-tree-halower --save

Node 属性

参数说明类型可选值默认值
id    当这个属性为空,title属性将作为keyStringY
title    节点名称StringN
expanded节点是否展开BooleanYfalse
checked节点复选框是否选中BooleanYfalse
halfcheck节点是否为半选(下级被选中)BooleanYfalse
visible节点是否可见BooleanYtrue
selected节点是否被选中BooleanYfalse
children子节点Array[Object]Y
async是否异步加载子节点BooleanYfalse
loading开启加载效果BooleanYfalse
nocheck多复选框开启时指定某一节点不渲染复选框BooleanYfalse
chkDisabled禁用某一结点的复选框的功能BooleanYfalse
hasExpanded某一结点是否已经展开过(之前错误拼写成了hasExpended)BooleanYfalse
parent获取父节点(当allowGetParentNode=true时,增加parent方法,若父节点不存在时,会返回null))Functionundefined
selDisabled禁用某一结点的select的功能BooleanYfalse

Tree 属性

参数说明类型可选值默认值
data    树数据源Array[Object]N
multiple开启复选模式BooleanYfalse
tpl自定义模板JSXYfalse
halfcheck开启半选模式BooleanY全选
scoped隔离节点选中状态BooleanYfalse
draggable是否支持拖拽BooleanYfalse
dragAfterExpanded拖拽后展开BooleanYtrue
canDeleteRoot是否可以删除根节点BooleanYfalse
maxLevel最大层级数NumberY1024
topMustExpand首层是否必须可展开BooleanYtrue
allowGetParentNode是否允许节点获取父节点BooleanYfalse
radioselected 只允许单选BooleanYfalse
selectAloneselect事件不影响checkboxBooleanYfalse

方法

方法名说明参数
getSelectedNodes返回目前被选中的节点所组成的数组,isOriginal:默认false, ignoreInvisibleNode:默认falseisOriginal: Boolean,ignoreInvisibleNode: Boolean
getCheckedNodes返回目前复选框选中的节点组成的数组isOriginal: Boolean,ignoreInvisibleNode: Boolean
getNodesoptions: 可以包含一些过滤属性对象如{selected: true},如果为空,请使用 {}; data: 数组,内容为[node,…],默认为传入的data数据;isOriginal:获取的数据是否保持原样,默认为false,会去掉children``hasExpanded``parent属性,ignoreInvisibleNode:忽略不可见节点,默认falseoptions: Object, data: Array,isOriginal: Boolean,ignoreInvisibleNode: Boolean
searchNodesfilter:function/string (如果是函数则最终会返回一个boolean类型);data:默认为this.datafilter: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-expandexpand触发事件node: Object, expand: boolean, position: {level, index}