组织架构组件在一些项目中是需要的，这里介绍一下最近摸索出来的组织架构图组件。此组件主要是基于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
demo
网友评论