OrgTree 组织架构树
展示组织架构/层级关系的树形控件，支持展开/收起、选择等交互操作。
基本使用
区域销售经理-深圳 10778230
- ｜ 001
M3 | All channel | -
下级 3
销售主管-深圳 10904000
- ｜ 001-1
M2 | AB/CD | -
下级 2
销售主管-深圳 10822171
- ｜ 001-2
W2 | ABCD/TT | -
下级 5
经销商发展代表-深圳 10822167
莫严孔 ｜ 28069662
W1 | ABCD/TT | -
经销商发展代表-深圳 10822169
季伟 ｜ 28069758
W1 | ABCD/TT | -
经销商发展代表-深圳 10822163
韩若枫 ｜ 28072134
W1 | ABCD/TT | -
经销商发展代表-深圳 10822154
郑演炜 ｜ 28072147
W1 | ABCD/TT | -
经销商发展代表-深圳 10648538
庞康生 ｜ 28062123
W1 | ABCD/TT | -
销售主管-深圳 10648544
- ｜ 001-3
M2 | TT | -
👇 code
API
| 参数 | 类型 | 默认值 | 是否必填 | 说明 |
|---|---|---|---|---|
horizontal | boolean | false | No | 是否横向 |
expandAll | boolean | false | No | 是否展开所有节点。collapsible 为 true 才生效 |
currentNodeValue | string | number | - | No | 需要展开的节点id。若有值时，此节点的上层节点都为展开状态 |
className | string | - | No | className |
style | CSSProperties | - | No | style |
onClick | (e: React.MouseEvent<HTMLElement, MouseEvent>, data: ITreeNode) => void | - | No | 节点点击事件 |
fieldNames | FieldNamesType | { label: 'label', value: 'value', children: 'children' } | No | 字段映射 map |
data | ITreeNode | - | No | 节点数据 |
onExpand | (e: React.MouseEvent<HTMLElement, MouseEvent>, data: ITreeNode) => void | - | No | 节点展开事件 |
collapsible | boolean | false | No | 是否可折叠 |
labelClassName | string | - | No | 节点 class |
highlightedValues | (string | number)[] | - | No | 需要高亮的节点id |
customNodeStyle | (node: ITreeNode) => React.CSSProperties | - | No | 自定义节点容器样式 @param node @returns |
renderContent | (node: ITreeNode) => React.ReactNode | - | No | 自定义节点渲染 @param data @returns |