基于Vue的TpOrganization组织架构组件

组织架构组件在一些项目中是需要的，这里介绍一下最近摸索出来的组织架构图组件。此组件主要是基于Vue技术来做开发，使用Svg来画线条，后期加入节点拖动整合，上下级收缩等。

仓库地址

https://gitee.com/underline/tp-organization.git

主要特点

• 支持组织架构仅显示模式
• 支持组织架构编辑模式
• 支持图标拓展，可随意拓展
• 支持包括新增、删除等操作，并可随意拓展
• 支持快速替换样式文件，所有样式抽离源码，单独文件方便替换和编译
• 支持上下级收缩
• 支持属性名自定义
• 支持节点拖动（暂未实现）

Props

属性名	描述	类型	可选	默认值	必填
data	组织架构数据data, {label:'',value:'',children:[]}	Object	-	-	true
propsKey	关键属性自定义	Object	-	{label: 'label',/*源数据中的标签对应的key*/ value: 'value',/*源数据中值对应的key*/ children: 'children'/*源数据中下一级数据对应的key*/}	false
width	用于显示数据的box的宽度	Number	-	-	true
strokeWidth	线的宽度	Number	-	1	false
strokeColor	线的颜色	String	-	#409eff	false
strokeRadius	线的radius	Number	-	5	false
vspace	上下级层的高度	Number	>=20	30	false
itemWidth	item的宽度	String	-	100px	false
itemHeight	item的高度	String	-	44px	false
itemBgColor	item的背景颜色	String	-	white	false
color	字体颜色	String	-	#409eff	false
fontSize	字体大小	String	-	14px	false
onlyShow	使用显示模式	Boolean	true false	false	false
hoverClass	鼠标移入时的颜色，此类中请使用!important模式	String	-	-	false
btns	操作按钮，[{label:'',icon:'',callback:()=>{}},...]	Array	-	-	false

Event

• 暂无

demo