更新记录

1.0.0（2026-05-20） 下载此版本

初始版本发布 1.支持垂直/水平布局 2.支持节点折叠/展开 3.支持自定义渲染 4.支持自定义连接线颜色

平台兼容性

uni-app(5.0)

Vue2 Vue3 Vue3插件版本 Chrome Chrome插件版本 Safari app-vue app-vue插件版本 app-nvue Android Android插件版本 iOS 鸿蒙
- √ 1.0.0 √ 1.0.0 - √ 1.0.0 - 10.0 1.0.0 - -
微信小程序 微信小程序插件版本 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ 1.0.0 - - - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× × √

概述

OrgTree 是一个功能强大的组织架构树组件，支持垂直/水平布局、节点折叠/展开、节点拖拽、自定义节点渲染等特性。组件采用纯 CSS 实现连接线，视觉效果清晰美观。

Props

参数 说明 类型 默认值 可选值
data 树形数据 Object/Array - -
props 字段映射配置 Object 见下方 单元格3
horizontal 水平布局模式 Boolean false true/false
selectedKey 选中节点的key值 String '' -
collapsable 是否可折叠 Boolean true true/false
renderContent 自定义渲染函数 Function null -
labelWidth 标签宽度 String/Number '' -
labelClassName 标签自定义类名 Function/String '' -
selectedClassName 选中状态自定义类名 Function/String '' -
defaultExpandLevel 默认展开层级 Number 0 0,1,2...
defaultExpandAll 是否默认展开所有节点 Boolean false true/false
lineColor 连接线颜色 String '#F50033' 任意合法颜色值

props 配置

{
  label: 'label',      // 节点显示文本的字段名
  expand: 'expand',    // 节点展开状态的字段名
  children: 'children' // 子节点列表的字段名
}

Events

事件名 说明 回调参数
on-expand 节点展开/收起时触发 (event, data)
on-node-click 节点点击时触发 (event, data)
on-node-focus 节点聚焦时触发 (event, data)
on-node-mouseover 鼠标移出节点时触发 (event, data)
on-node-mouseout 鼠标移出节点时触发 (event, data)
on-node-drag-start 节点拖拽开始时触发 (event, data)
on-node-drag-over 节点拖拽经过时触发 (event, data)
on-node-drop 节点拖拽放置时触发 (event, dragData, dropData)

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...