OrganizationChart 组织架构图
用于可视化展示层级组织数据,支持节点展开/折叠、自定义渲染、选中状态等。
基础用法
通过 data 传入树形结构数据,默认展开全部节点。
- CEO
- CTO
- 前端团队
- 后端团队
CFO
- 财务部
COO
- 运营部
市场部
自定义节点
通过 node 插槽自定义节点渲染内容。
- 张三首席执行官总经办
- 李四技术总监技术部
- 王五前端负责人前端组
- 赵六后端负责人后端组
钱七
财务总监
财务部
- 孙八会计财务一组
可折叠
设置 collapsible 后节点下方出现展开/折叠按钮。
- CEO
- CTO
- 前端团队
- 后端团队
CFO
- 财务部
COO
- 运营部
市场部
选中节点
通过 v-model:selectedKey 绑定选中节点的 key。
- CEO
- CTO
- 前端团队
- 后端团队
CFO
- 财务部
COO
- 运营部
市场部
当前选中:未选中
默认展开指定节点
通过 default-expand-all=false + default-expanded-keys 控制初始展开。
- CEO
- CTO
- CFO
- COO
方法调用
通过 ref 调用 expandAll / collapseAll 方法。
- CEO
- CTO
- CFO
- COO
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | object | - | 组织架构树形数据,每节点至少包含 key 和 label 字段 |
labelKey | string | 'label' | 节点显示文本对应的字段名 |
childrenKey | string | 'children' | 子节点列表对应的字段名 |
nodeKey | string | 'key' | 节点唯一标识字段名 |
defaultExpandAll | boolean | true | 是否默认展开全部节点 |
defaultExpandedKeys | (string | number)[] | [] | 默认展开的节点 key 列表(defaultExpandAll=false 时生效) |
collapsible | boolean | true | 是否允许折叠/展开子节点 |
direction | 'vertical' | 'horizontal' | 'vertical' | 布局方向 |
selectedKey | string | number | null | null | 选中节点的 key,支持 v-model |
nodeClass | string | object | array | - | 节点卡片的自定义 class |
Events
| 事件名 | 回调参数 | 说明 |
|---|---|---|
node-click | (node: object) | 点击节点时触发 |
update:selectedKey | (key: string | number | null) | 选中节点变化时触发 |
expand | (keys: (string | number)[]) | 展开节点后触发,参数为当前所有展开 key |
collapse | (node: object) | 折叠节点后触发 |
Methods
| 方法名 | 参数 | 说明 |
|---|---|---|
expandAll | () | 展开所有节点 |
collapseAll | () | 折叠所有节点 |
Slots
| 插槽名 | 参数 | 说明 |
|---|---|---|
node | { data, expanded, selected } | 自定义整个节点内容 |
label | { data } | 自定义节点文本 |
expand-icon | { expanded } | 自定义展开/折叠图标 |