脚本宝典收集整理的这篇文章主要介绍了安利一下最近整的横向结构图插件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

简介

最近在干活的时候需要横向现实组织结构图图（或者叫树桩图？我其实也闹不清应该叫什么），本着不重复造轮子的原则我先搜索了一下有没有现成的组件。在Awesome-vue上面找了一下，大佬们做的组件都很酷炫，功能也很强大，然而并不十分符合我的需求。那么只好自己写一个了。地址在Github，都进来了那还不点个Star么。

效果

使用方法

经由<script>标签引入

第一步：
在上面那个GITHub地址进去或者直接点这里下载tree.global.js
第二步：
用<script>标签引入。目前还没有上cdn，反正也没多大。
请先引入Vue再引入这个组件。不需要使用Vue.use，会自动全局注册。
第三步：
当做全局组件直接使用。

<tree-node :tree-data="treeData" />

@H_360_40@模块化引入

第一步：

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个了，这个主要是出于练习目的，但又不是不能用。。。而且还有特有的抖动功能。

脚本宝典总结

以上是脚本宝典为你收集整理的安利一下最近整的横向结构图插件全部内容，希望文章能够帮你解决安利一下最近整的横向结构图插件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。