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

参数类型默认值说明
dataobject-组织架构树形数据,每节点至少包含 key 和 label 字段
labelKeystring'label'节点显示文本对应的字段名
childrenKeystring'children'子节点列表对应的字段名
nodeKeystring'key'节点唯一标识字段名
defaultExpandAllbooleantrue是否默认展开全部节点
defaultExpandedKeys(string | number)[][]默认展开的节点 key 列表(defaultExpandAll=false 时生效)
collapsiblebooleantrue是否允许折叠/展开子节点
direction'vertical' | 'horizontal''vertical'布局方向
selectedKeystring | number | nullnull选中节点的 key,支持 v-model
nodeClassstring | 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 }自定义展开/折叠图标