Vue组织架构树图组件vue-org-tree的使用

说明

最近需要作出一个组织架构图来可视化展示一下，最后找到vue-org-tree这个组件，觉得效果还不错~，可选节点颜色、横向/纵向展开、打开/收起，在这记录一下使用方法，效果图如下：

快速开始

安装

npm install --save-dev less less-loader
npm install --save-dev vue2-org-tree

（可能还需要安装其他组件，报错的话根据提示再install就行）

然后在main.js引入

import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)

使用

 

API

• props

  prop	descripton	type	default
  data		Object
  props	configure props	Object	{label: 'label', children: 'children', expand: 'expand'}
  labelWidth	node label width	String | Number.	auto
  collapsable	children node is collapsable	Boolean	true
  renderContent	how to render node label	Function	-
  labelClassName	node label class	Function | String	-

• events

  • on-expand

    well be called when the collapse-btn clicked

  • on-node-click

    well be called when the node-label clicked

参考html例子：https://github.com/hukaibaihu/vue-org-tree/blob/gh-pages/index.html

组件github：https://github.com/hukaibaihu/vue-org-tree