共计 1059 个字符，预计需要花费 3 分钟才能阅读完成。
简介
最近在干活的时候需要横向现实组织结构图图（或者叫树桩图？我其实也闹不清应该叫什么），本着不重复造轮子的原则我先搜索了一下有没有现成的组件。在 Awesome-vue 上面找了一下，大佬们做的组件都很酷炫，功能也很强大，然而并不十分符合我的需求。那么只好自己写一个了。地址在 Github，都进来了那还不点个 Star 么。
效果
使用方法
经由 <script> 标签引入
第一步：在上面那个 GitHub 地址进去或者直接点这里下载 tree.global.js 第二步：用 <script> 标签引入。目前还没有上 cdn，反正也没多大。请先引入 Vue 再引入这个组件。不需要使用 Vue.use，会自动全局注册。第三步：当做全局组件直接使用。
<tree-node :tree-data=”treeData” />
模块化引入
第一步：
npm install nw-vue-horizontal-tree -S
第二步：
import treeNode from ‘nw-vue-horizontal-tree’
Vue.use(treeNode)
第三步：当做全局组件直接使用。
<tree-node :tree-data=”treeData” />
如果你使用的是字符串模板或者单文件组件（*.vue），那就可以使用 Camel-Case 来引入了。
<treeNode :treeData=”treeData” />
传入数据的格式
treeData = {
name: ‘root’,
children: [{
name: ‘child1’,
children: [{
name: ‘child1-1’,
children: [],
}, {
name: ‘child1-2’,
children: [],
}],
}, {
name: ‘child2’,
children: [],
}],
}
name 就是节点的标签，children 就是子节点数据。
更多功能
在之前干活的时候其实还有许多别的功能，例如节点标签可以是 input 或者 select，点击添加、删除节点等功能，但当时写的时候比较粗暴，功能都是直接暴力加上去的，毕竟先把活干好比较重要，但抽象出来做组件就不太合适了。所以还是先做个基础的，那些我想一想怎么封装一下加上来吧。
最后
项目地址在 Github，都看到这了，还不点个 Star 么（唉这句话好熟悉）。这是我写的第一个我认为有实际用途的组件。欢迎提交 issue。顺便再说一下我去年写的 Vue-Toaster 组件。当然，这种 toaster 组件世界上没有 1000 个也有 800 个了，这个主要是出于练习目的，但又不是不能用。。。而且还有特有的抖动功能。