温馨提示：不安装less-loader基本上都会报错
严老湿这边呢，就直接使用 Vue-cli 起步了， vue-org-tree 安装成功之后，我们就直接使用了，在 Vue 页面或者组件中使用 vue2-org-tree 标签，动态绑定data
data数据放入页面中
id 每个元素不同的ID ，label为name， children为自己的子集数据
效果图：
刚刚我们看到的是默认排列方式 ，其实还有一种排列方式，我们一起来看看
horizontal 是水平排列方式，我们来实践一下吧，它的参数是 true 、 false
看看效果如何：
使用 label-class-name 我们还可以动态绑定自定义 class
我们一起来尝试一下吧！
js:
css：
看看效果图
折叠展示效果
折叠效果是有了，那么怎么展开呢？
js:
请看效果图：
问题又来了，默认展开如何实现？
请看大屏幕
在请求完数据之后直接调用,或者生命周期调用，可以自由发挥
第一个参数是你的资源data，第二个参数是全部展开或否
上效果图：
vue2-org-tree 向我们抛出了几个事件，我们先看看有哪些事件
on-node-click 就是被抛出的点击事件
我们在方法里面写一个NodeClick用来接受点击触发的值
打印结果：
它还向我们抛出了移入移出事件，返回值与点击事件大致相同
来了老弟？我们做移入移出，肯定是要有功能的对不对？
每当我们的鼠标移入到小盒子里就出现一个模态框用来展示data内容
js:
css:
上效果图：
propdescriptontypedefaultdata
Object
propsconfigure props
Object
{label: 'label', children: 'children', expand: 'expand'}
labelWidthnode label width
String
|
Number
auto
collapsablechildren node is collapsable
Boolean
true
renderContenthow to render node label
Function
-labelClassNamenode label class
Function
|
String
-selectedKeyThe key of the selected node
String
-selectedClassNameThe className of the selected node
Function
|
String
-
event namedescriptontypeclickClick event
Function
mouseoveronMouseOver event
Function
mouseoutonMouseOut event
Function
鼠标点击时调用它。
params e Event
params data Current node data
well be called when the node-label clicked
params e Event
params data Current node data
当鼠标悬停时调用它。
params e Event
params data Current node data
当鼠标离开时调用它。
params e Event
params data Current node data
最后附上Git地址：https://github.com/CrazyMrYan/vue2-org-tree
预览地址：http://crazy.lovemysoul.vip/gitdemo/vue2-org-tree
关注“悲伤日记”更多精彩文章
1.dhtmlxTreedHTMLxTree是一个功能丰富的Tree Menu控件。提供丰富的操作API，AJAX支持和drag-n-drop功能。
2. Control.Treeview
采用Mootools开发的树形菜单控件。支持通过Ajax动态获取节点，设置默认选中某些节点。
3. Folder Tree
文件夹树形控件。支持利用拖放（drag and drop）操作来重新排序节点，利用Ajax更新节点。
4. DHTML Tree
这是一个基于标准Html结构构造的Tree控件。
5. dFTree
dFTree是一个javascript css Folder Tree支持利用Ajax技术动态新增/删除/修改节点等功能。
