组织结构图
组织结构图可视化分层组织数据。
导入#
import { OrganizationChart } from 'primereact/organizationchart';
基本用法#
组织结构图需要一个 TreeNode 实例的集合作为 value。
<OrganizationChart value={data} />
模板#
使用 nodeTemplate 属性定义自定义内容，而不是节点 label。
<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
选择#
可以通过定义 selectionMode 以及与 selection 和 onSelectionChange 属性的值绑定来选择节点。默认情况下，只能选择一个节点，将 selectionMode 设置为 multiple 以选择多个节点。
<OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
着色#
可以使用 TreeNode 的 className 和 style 选项配置特定节点的样式。
<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
无障碍#
屏幕阅读器
该组件目前使用基于表格的实现，并且不提供高级别的屏幕阅读器支持，计划在即将到来的版本中使用与树形小部件对齐的 aria 角色和属性的嵌套列表实现替换，以获得高级别的阅读器支持。
键盘支持
| 按键 | 功能 |
|---|---|
| tab | 在图表内的可聚焦元素之间移动焦点。 |
| enter | 切换节点的展开状态。 |
| space | 切换节点的展开状态。 |
| 数字键盘回车 | 切换节点的展开状态。 |