組織架構(gòu)組件在一些項(xiàng)目中是需要的查牌，這里介紹一下最近摸索出來(lái)的組織架構(gòu)圖組件。此組件主要是基于Vue技術(shù)來(lái)做開發(fā)滥壕，使用Svg來(lái)畫線條纸颜，后期加入節(jié)點(diǎn)拖動(dòng)整合，上下級(jí)收縮等绎橘。
倉(cāng)庫(kù)地址
https://gitee.com/underline/tp-organization.git
主要特點(diǎn)
- 支持組織架構(gòu)僅顯示模式
- 支持組織架構(gòu)編輯模式
- 支持圖標(biāo)拓展胁孙，可隨意拓展
- 支持包括新增、刪除等操作称鳞，并可隨意拓展
- 支持快速替換樣式文件浊洞，所有樣式抽離源碼，單獨(dú)文件方便替換和編譯
- 支持上下級(jí)收縮
- 支持屬性名自定義
- 支持節(jié)點(diǎn)拖動(dòng)（暫未實(shí)現(xiàn)）
Props
| 屬性名 | 描述 | 類型 | 可選 | 默認(rèn)值 | 必填 |
|---|---|---|---|---|---|
| data | 組織架構(gòu)數(shù)據(jù)data, {label:'',value:'',children:[]}
|
Object |
- | - | true |
| propsKey | 關(guān)鍵屬性自定義 | Object |
- | {label: 'label',/*源數(shù)據(jù)中的標(biāo)簽對(duì)應(yīng)的key*/ value: 'value',/*源數(shù)據(jù)中值對(duì)應(yīng)的key*/ children: 'children'/*源數(shù)據(jù)中下一級(jí)數(shù)據(jù)對(duì)應(yīng)的key*/} |
false |
| width | 用于顯示數(shù)據(jù)的box的寬度 | Number |
- | - | true |
| strokeWidth | 線的寬度 | Number |
- | 1 |
false |
| strokeColor | 線的顏色 | String |
- | #409eff |
false |
| strokeRadius | 線的radius | Number |
- | 5 |
false |
| vspace | 上下級(jí)層的高度 | 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 | 鼠標(biāo)移入時(shí)的顏色胡岔，此類中請(qǐng)使用!important模式 |
String |
- | - | false |
| btns | 操作按鈕法希，[{label:'',icon:'',callback:()=>{}},...]
|
Array |
- | - | false |
Event
- 暫無(wú)
demo
demo
