TpOrganization組織架構組件

組織架構組件在一些項目中是需要的，這裏介紹一下最近摸索出來的組織架構圖組件。此組件主要是基於Vue技術來做開發，使用Svg來畫線條，後期加入節點拖動整合，上下級收縮等。

倉庫地址

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

主要特點

• 支持組織架構僅顯示模式
• 支持組織架構編輯模式
• 支持圖標拓展，可隨意拓展
• 支持包括新增、刪除等操作，並可隨意拓展
• 支持快速替換樣式文件，所有樣式抽離源碼，單獨文件方便替換和編譯
• 支持屬性名自定義（暫未實現）
• 支持節點拖動（暫未實現）
• 支持上下級收縮（暫未實現）

Props

屬性名	描述	類型	可選	默認值	必填
data	組織架構數據data, {label:'',value:'',children:[]}	Object	-	-	true
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