TreeSelect

TreeSelect 是一个表单组件，用于从分层数据中进行选择。

导入#


import { TreeSelect } from 'primereact/treeselect';
         

基本#

TreeSelect 用作具有 value 和 onChange 属性以及 options 集合的受控组件。内部使用 Tree 组件，因此选项模型基于 TreeNode API。

在单选模式下，值绑定应为节点的 key 值。

选择项目

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

多选#

可以通过将 selectionMode 设置为 multiple 来选择多个节点。默认情况下，在多选模式下，需要按下 metaKey（例如 ⌘）才能添加到现有选择中，但是可以通过禁用 metaKeySelection 属性来配置此行为。请注意，在支持触摸的设备上，TreeSelect 始终忽略 metaKey。

在多选模式下，值绑定应为键值对，其中键是节点键，值是布尔值，用于指示选择。


{
    '0-0': true,
    '0-1-0': true
}
         
选择项目

<TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false}  
    className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items"></TreeSelect>
         

复选框#

通过将 selectionMode 配置为 checkbox，可以启用通过复选框选择多个节点的功能。

在复选框选择模式下，值绑定应为键值对，其中键是节点键，值是一个对象，该对象具有 checked 和 partialChecked 属性，以表示节点对象的选中状态，从而指示选择。


{
    '0-0': {
        partialChecked: false,
        checked: true
    }
}
         
选择项目

<TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false}  
    className="md:w-20rem w-full" selectionMode="checkbox" display="chip" placeholder="Select Items"></TreeSelect>
         

筛选#

通过添加 filter 属性可以启用筛选功能。默认情况下，节点的 label 属性用于与文本字段中的值进行比较。为了自定义在搜索期间应使用的字段，请定义 filterBy 属性。此外，filterMode 指定筛选策略。在 lenient 模式下，当查询与节点匹配时，不会进一步搜索该节点的子节点，因为该节点的所有后代都包含在内。另一方面，在 strict 模式下，当查询与节点匹配时，筛选会继续对所有后代进行。

选择项目

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    filter className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

清除图标#

启用 showClear 时，会添加一个清除图标以重置 TreeSelect。

选择项目

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

受控#

节点展开状态通过 expandedKeys 和 onToggle 属性以编程方式进行管理。

选择项目

<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"
    expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} panelHeaderTemplate={headerTemplate}></TreeSelect>
         

浮动标签#

当获得焦点时，浮动标签会出现在输入字段的顶部。有关更多信息，请访问 FloatLabel 文档。

空

<FloatLabel className="w-full md:w-20rem">
    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
        className="w-full"></TreeSelect>
    <label htmlFor="treeselect">TreeSelect</label>
</FloatLabel>
         

填充#

将 variant 属性指定为 filled，以使用比默认的 outlined 样式更高的视觉强调来显示组件。

选择项目

<TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

无效#

使用 invalid 属性显示无效状态，以指示验证失败。在与表单验证库集成时，可以使用此样式。

选择项目

<TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
         

已禁用#

当存在 disabled 时，无法编辑和聚焦该元素。

选择项目

<TreeSelect disabled placeholder="Select Item" className="md:w-20rem w-full" />
         

可访问性#

屏幕阅读器

用于描述组件的值可以使用 aria-labelledby 或 aria-label 属性提供。除了 aria-haspopup 和 aria-expanded 属性外，treeselect 元素还具有 combobox 角色。组合框和弹出窗口之间的关系是通过 aria-controls 创建的，该属性引用弹出窗口的 ID。

弹出列表的 ID 引用 combobox 元素的 aria-controls 属性，并使用 tree 作为角色。每个列表项都具有 treeitem 角色，以及 aria-label、aria-selected和 aria-expanded 属性。在复选框选择中，使用 aria-checked 而不是 aria-selected。复选框和切换图标对屏幕阅读器隐藏，因为它们的父元素具有 treeitem 角色，并且使用属性代替阅读器和键盘支持。树节点的容器元素具有 group 角色。aria-setsize、aria-posinset 和 aria-level 属性是隐式计算的，并添加到每个 treeitem 中。

如果启用了筛选，则可以定义 filterInputProps 以向筛选输入元素提供 aria-* 属性。


<span id="dd1">Options</span>
<TreeSelect aria-labelledby="dd1" />

<TreeSelect aria-label="Options" />
     

关闭状态键盘支持

按键功能
tab将焦点移动到 treeselect 元素。
空格键打开弹出窗口，并将视觉焦点移动到所选的树节点，如果没有选择任何树节点，则第一个树节点将获得焦点。
向下箭头打开弹出窗口，并将视觉焦点移动到所选的选项，如果没有选择任何选项，则第一个选项将获得焦点。

弹出窗口键盘支持

按键功能
tab将焦点移动到弹出窗口中的下一个可聚焦元素，如果没有，则第一个可聚焦元素将获得焦点。
shift + tab将焦点移动到弹出窗口中的上一个可聚焦元素，如果没有，则最后一个可聚焦元素将获得焦点。
enter选择聚焦的选项，如果选择模式为单选，则关闭弹出窗口。
空格键选择聚焦的选项，如果选择模式为单选，则关闭弹出窗口。
escape关闭弹出窗口，并将焦点移动到 treeselect 元素。
向下箭头将焦点移动到下一个树节点。
向上箭头将焦点移动到上一个树节点。
右箭头如果节点已关闭，则打开该节点，否则将焦点移动到第一个子节点。
左箭头如果节点已打开，则关闭该节点，否则将焦点移动到父节点。

过滤输入框键盘支持

按键功能
enter关闭弹出窗口并将焦点移动到树形选择元素。
escape关闭弹出窗口并将焦点移动到树形选择元素。

关闭按钮键盘支持

按键功能
enter关闭弹出窗口并将焦点移动到树形选择元素。
空格键关闭弹出窗口并将焦点移动到树形选择元素。
escape关闭弹出窗口并将焦点移动到树形选择元素。
                          PrimeReact 10.9.1，由 PrimeTek 提供