树状图画发如下：
准备材料：word、树状图
1、首先我们需要先打开word,进入到主界面，在主界面进行先关的操作即可作出树状图。
2、之后点击word主界面左上角功能区域的“开始”→“插入”→“图形”，进入到插入树状图的图形操作选项卡。
3、我们在形状选项卡中，选择一个自己树状图需要的图形即可，之后点击这个图形，就可以开始插入树状图的图形。
4、在word中画出树状图的基本形状和位置，大小和位置调整的差不多合适位置即可。
5、我们点击一个形状，会出现周围很多的点，通过拉动和变动点，可以调整形状的大小和方向。鼠标放在中间，按住不动可以移动位置。
6、之后我们双击一个图像，就可以打开给图形编辑的界面，根据自己的需要编辑即可。
7、之后我们用如图的工具，设置好自己需要的样式即可。
8、不过一般就是选择颜色和阴影，自己点击上诉功能，在里面选择即可。
9、之后在左侧点击“添加文字”。
10、我们在形状中输入文字即可。
11、之后将形状中的文字选中，鼠标右键点击。
12、在弹出的对话框中，选择字号、横竖、颜色即可设置成自己需要的样式。
13、最后我们将所有的图像输入好文字，如图所示。
14、之后我们在次点击“插入”→“形状”，选中一种箭头。
15、我们点击箭头，调整箭头的大小和方向。
16、还可以设置颜色，之后就像整个word的树状图，设置完成。
温馨提示：不安装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
关注“悲伤日记”更多精彩文章
