代码演示
如何引入
基本用法
最简单的用法,默认为单选模式,每一级菜单项均可选择。
多选
设置
multiple
,可以进行多选。多选情况下所有子项都被选择时,自动勾选显示其父项。通过设置 maxTagCount
属性,可以设置显示的标签数量上限。通过设置 leafOnly
(>= v0.32.0) 属性,可以设置只展示叶子节点,同时 onChange 的回调入参也会只有叶子节点的值。可搜索的
通过设置
filterTreeNode
属性可支持搜索功能。默认对 label
值进行搜索,可通过 treeNodeFilterProp
更改。如果只希望展示过滤后的结果,可以设置
showFilteredOnly
。搜索框位置
可以使用
searchPosition
来设置搜索框的位置,可选: dropdown
(默认)、trigger
。当输入框位于 trigger 时:
- 搜索框占位符由
placeholder
控制; showClear=true
时,点击输入框的清空按钮,将同时清空 inputValue 和 value。
尺寸大小
可以通过
size
设置尺寸大小,可选: 'small'、'default'、'large'默认展开
defaultExpandAll
和 expandAll
均可以设置 TreeSelect
的默认展开/收起状态。二者的区别是,defaultExpandAll
只在初始化时生效,而 expandAll
不仅会在初始化时生效,当数据(treeData
)发生动态更新时,expandAll
也仍然生效。其中,
expandAll
是从 1.30.0 开始支持的。在下面的 demo 中,
TreeData
更新后,defaultExpandAll
失效,expandAll
仍然生效。禁用
严格禁用
version: >= 1.30.0
可以使用
disableStrictly
来开启严格禁用。开启严格禁用后,当节点是 disabled 的时候,则不能通过子级或者父级的关系改变选中状态。以下面的 demo 为例,节点"中国"开启了严格禁用,因此,当我们改变其父节点"亚洲"的选中状态时,也不会影响到节点"中国"的选中状态。
受控
传入
value
时即为受控组件,可以配合 onChange
使用。节点选中关系
版本:>= 2.5.0
多选时,可以使用
checkRelation
来设置节点之间选中关系的类型,可选:'related'(默认)、'unRelated'。当选中关系为 'unRelated' 时,意味着节点之间的选中互不影响。开启搜索的展开受控
传入
expandedKeys
时即为展开受控组件,可以配合 onExpand
使用。当展开受控时,如果开启 filterTreeNode
并进行搜索是不会再自动展开节点的,此时,节点的展开完全由 expandedKeys
来控制。你可以利用 onSearch
的入参 filteredExpandedKeys
(version: >= 2.6.0) 来实现展开受控时的搜索展开效果。虚拟化
列表虚拟化,用于大量树节点的情况。开启后,动画效果将被关闭。
virtualize
是一个包含下列值的对象: - height: 高度值,如果为 string 必须有计算高度才能被渲染出来,即其父节点有 offsetHeight。建议传入数组。
- width: 宽度值,默认 100%
- itemSize: 每行的treeNode的高度,必传
如果带搜索框,建议开启
showFilteredOnly
减少多余节点的渲染。动态更新数据
异步加载数据
通过设置
loadData
可以动态加载数据,此时需要在数据中传入 isLeaf
标明叶子节点。自定义 Trigger
如果默认的触发器样式满足不了你的需求,可以用
triggerRender
自定义选择框的展示。triggerRender 入参如下:
自定义渲染已选项
你可以通过 renderSelectedItem 自定义选择框中已选项标签的渲染结构。
- 单选时
renderSelectedItem(treeNode: TreeNode) => content:ReactNode
- 多选时
renderSelectedItem(treeNode: TreeNode, { index:number, onClose:function }) => { isRenderInTag:bool, content:ReactNode }
- isRenderInTag 为 true 时,会自动将 content 包裹在 Tag 中渲染(带有背景色以及关闭按钮)
- isRenderInTag 为 false 时,将直接渲染返回的 content
API参考
TreeSelect
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
arrowIcon | 自定义右侧下拉箭头Icon,当showClear开关打开且当前有选中值时,hover会优先显示clear icon | ReactNode | 1.15.0 | |
autoAdjustOverflow | 浮层被遮挡时是否自动调整方向(暂时仅支持竖直方向,且插入的父级为 body) | boolean | true | 0.34.0 |
autoExpandParent | 是否自动展开父节点 | boolean | false | 0.34.0 |
checkRelation | 多选时,节点之间选中状态的关系,可选:'related'、'unRelated' | string | 'related' | 2.5.0 |
className | 选择框的 className 属性 | string | - | - |
clickToHide | 选择后是否自动关闭下拉弹层,仅单选模式有效 | boolean | true | 1.5.0 |
defaultExpandAll | 设置在初始化时是否展开所有节点。而如果后续数据(treeData )发生改变,这个 api 是无法影响节点的展开情况的,如果有这个需要可以使用 expandAll | boolean | false | 0.32.0 |
defaultExpandedKeys | 默认展开的节点,显示其直接子级 | string[] | - | 0.32.0 |
defaultOpen | 默认展开下拉菜单 | boolean | false | 0.32.0 |
defaultValue | 指定默认选中的条目 | string | number | TreeNode | (string | number | TreeNode)[] | - | - |
disabled | 是否禁用 | boolean | false | - |
disableStrictly | 是否严格禁用 | boolean | false | 1.30.0 |
dropdownClassName | 下拉菜单的 className 属性 | string | - | - |
dropdownMatchSelectWidth | 下拉菜单最小宽度是否等于Select | boolean | true | - |
dropdownStyle | 下拉菜单的样式 | CSSProperties | - | - |
emptyContent | 当搜索无结果时展示的内容 | ReactNode | 暂无数据 | - |
expandAction | 展开逻辑,可选 false, 'click', 'doubleClick'。默认值为 false,即仅当点击展开按钮时才会展开 | boolean | string | false | 1.4.0 |
expandAll | 设置是否默认展开所有节点,若后续数据(treeData )发生改变,默认的展开情况也是会受到这个 api 影响的 | boolean | false | 1.30.0 |
expandedKeys | (受控)展开的节点,默认展开节点显示其直接子级 | string[] | - | 0.32.0 |
filterTreeNode | 是否根据输入项进行筛选,默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean|(inputValue: string, treeNodeString: string) => boolean | false | - |
getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 position: relative | function():HTMLElement | - | - |
insetLabel | 前缀标签别名,主要用于 Form | ReactNode | - | 0.28.0 |
labelEllipsis | 是否开启label的超出省略,默认虚拟化状态下开启 | boolean | false|true(virtualized) | 1.8.0 |
leafOnly | 多选模式下是否开启 onChange 回调入参及展示标签只有叶子节点 | boolean | false | 0.32.0 |
loadData | 异步加载数据,需要返回一个Promise | (treeNode: TreeNode) => Promise | - | 1.32.0 |
loadedKeys | (受控)已经加载的节点,配合 loadData 使用 | Set< string > | - | 1.32.0 |
maxTagCount | 最多显示多少个 tag | number | - | - |
motionExpand | 是否开启选项树节点动画 | boolean | true | - |
multiple | 是否支持多选 | boolean | false | - |
optionListStyle | optionList的样式 | CSSProperties | - | 1.8.0 |
outerBottomSlot | 渲染在弹出层底部,与 optionList 平级的自定义 slot | ReactNode | - | 1.1.0 |
outerTopSlot | 渲染在弹出层顶部,与 optionList 平级的自定义 slot,注意如果开启了 filterTreeNode 会取代搜索框,可以通过 search 方法来自行处理 | ReactNode | - | 1.9.0 |
placeholder | 选择框默认文字 | string | - | - |
prefix | 前缀标签 | ReactNode | - | 0.28.0 |
preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素,作用于组件内的 focus 方法 | boolean | ||
renderFullLabel | 完全自定义label的渲染函数,入参及用法详见 | (obj) => ReactNode | - | 1.7.0 |
renderLabel | 自定义label的渲染函数,入参及用法详见 | (label:ReactNode, data:TreeNode) => ReactNode | - | 1.6.0 |
renderSelectedItem | 自定义渲染已选项 | Function | - | 1.26.0 |
searchAutoFocus | 搜索框自动聚焦 | boolean | false | 1.27.0 |
searchPlaceholder | 搜索框默认文字 | string | - | - |
searchPosition | 设置搜索框的位置,可选: dropdown 、trigger | string | dropdown | 1.29.0 |
showClear | 当值不为空时,trigger 是否展示清除按钮 | boolean | false | |
showFilteredOnly | 搜索状态下是否只展示过滤后的结果 | boolean | false | 0.32.0 |
showSearchClear | 是否显示搜索框的清除按钮 | boolean | true | 0.35.0 |
size | 选择框大小,可选 large ,small ,default | string | default | - |
style | 选择框的样式 | CSSProperties | - | - |
suffix | 后缀标签 | ReactNode | - | 0.28.0 |
treeData | treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 值在整个树范围内唯一) | TreeNode[] | [] | - |
treeNodeFilterProp | 搜索时输入项过滤对应的 treeNode 属性 | string | label | - |
treeNodeLabelProp | 作为显示的 prop 设置 | string | label | - |
triggerRender | 自定义触发器渲染方法 | ({ placeholder: string }) => ReactNode | - | 0.34.0 |
validateStatus | 校验结果,可选 warning 、error 、 default (只影响样式背景色) | string | - | 0.32.0 |
value | 当前选中的节点的value值,传入该值时将作为受控组件 | string | number | TreeNode | (string | number | TreeNode)[] | - | - |
virtualize | 列表虚拟化,用于大量树节点的情况,由 height, width, itemSize 组成,参考 Tree - Virtualize Object。开启后将关闭动画效果。 | object | - | 0.32.0 |
zIndex | treeSelect下拉菜单的zIndex | number | 1030 | 0.30.0 |
onBlur | 失去焦点时的回调 | function(event) | - | - |
onChange | 选中树节点时调用此函数,默认返回值为当前所有选中项的value值及节点属性;如果是通过tag关闭,event参数为null | Function | - | - |
onChangeWithObject | 是否将选中项 option 的其他属性作为回调。设为 true 时,onChange 的入参类型Function(node|node[], e) 此时如果是受控,也需要把 value 设置成 object,且必须含有 value 的键值;defaultValue同理。 | boolean | false | 1.0.0 |
onExpand | 展示节点时调用 | function(expandedKeys:array, {expanded: bool, node}) | - | - |
onFocus | 聚焦时的回调 | function(event) | - | - |
onLoad | 节点加载完毕时触发的回调 | (loadedKeys: Set<string>, treeNode: TreeNode) => void | - | 1.32.0 |
onSearch | 文本框值变化时回调。 入参 filteredExpandedKeys 表示因为搜索或 value/defaultValue 而展开的节点的 key, 可以配合 expandedKeys 受控时使用 | function(sugInput: string, filteredExpandedKeys: string[]) | - | filteredExpandedKeys 在 2.6.0 中新增 |
onSelect | 被选中时调用,返回值为当前事件选项的key值 | function(selectedKey:string, selected: bool, selectedNode: TreeNode) | - | - |
onVisibleChange | 弹出层展示/隐藏时触发的回调 | function(isVisible:boolean) | 1.4.0 |
TreeNode
不同TreeNode
的 key 值要求必填且唯一。label
允许重复。v>=1.7.0 之前 value 值要求必须必填且唯一。 v>=1.7.0 之后 value 值非必填。此时 onChange, value, defaultValue 及 onChangeWithObject 中所取的 value 属性值将改为 key 值。 为了保证行为的符合预期,treeData 中的 value 值或者全部不填写,或者全部填写且唯一,不建议混写。
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 属性值 | string|number | - |
label | 展示的文本 | string|ReactNode | - |
icon | 自定义图标 | ReactNode | - |
disabled | 是否禁用,多选状态下支持 | boolean | false |
key | required且要求唯一 | string | - |
isLeaf | 是否为叶子节点 | boolean | - |
Method
- search(sugInput: string) 如果需要自定义搜索框可以使用该方法。
Accessibility
ARIA
- TreeSelect 会自动设置
aria-label
为 'TreeSelect',也支持用户自行设置aria-label
来表示该 TreeSelect 作用; - TreeSelect 允许用户设置
aria-describedby
、aria-errormessage
、aria-invalid
、aria-labelledby
、aria-required
,另外,Form 会为 Form.TreeSelect 自动设置这些属性; - TreeSelect 会自动为每个子节点分别设置
aria-disabled
、aria-checked
、aria-selected
、aria-level
来表明节点状态及层级;
示例: