参考
树形控件 Tree View
TreeView:树视图。行内容保持低调,选中状态用纸面上的光照表示;每个层级有一条发丝线缩进引导线,分支以回弹曲线展开。部件:Root、Label、Tree、NodeProvider、NodeContext、Branch、BranchControl、BranchTrigger、BranchIndicator、BranchText、BranchContent、BranchIndentGuide、Item、ItemText、ItemIndicator、NodeCheckbox、NodeRenameInput,以及 createTreeCollection。
Branch · BranchContent · BranchControl · BranchIndentGuide · BranchIndicator · BranchText · BranchTrigger · Item · ItemIndicator · ItemText · Label · NodeCheckbox · NodeRenameInput · Root · Tree
#BranchContent
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#BranchControl
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#BranchIndentGuide
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#BranchIndicator
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#BranchText
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#BranchTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Branch
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemIndicator
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ItemText
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Item
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Label
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#NodeCheckboxIndicator
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
fallback | unknown | — | |
indeterminate | unknown | — |
#NodeCheckbox
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#NodeContext
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#NodeProvider
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
indexPath | number[] | 树节点的索引路径 | |
node | TreeNode | 树节点 | |
node | T | 树节点 |
#NodeRenameInput
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | 树行的尺寸档位,行内留白随之变化 |
canRename | (node: T, indexPath: number[]) => boolean | 判断节点能否重命名的函数 | |
checkedValue | string[] | 受控的选中节点值 | |
collection | TreeCollection<T> | 树节点集合 | |
defaultCheckedValue | string[] | 渲染时选中节点值的初始值;不需要控制选中节点值时使用 | |
defaultExpandedValue | string[] | 渲染时展开节点值的初始值;不需要控制展开节点值时使用 | |
defaultFocusedValue | string | 渲染时聚焦节点值的初始值;不需要控制聚焦节点值时使用 | |
defaultSelectedValue | string[] | 渲染时已选节点值的初始值;不需要控制已选节点值时使用 | |
expandedValue | string[] | 受控的展开节点值 | |
expandOnClick | boolean | true | 点击分支时是否展开 |
focusedValue | string | 聚焦节点的 id | |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; tree: string; label: string; node(value: string): string; }> | 树组件各元素的 id,适合组合使用 | |
loadChildren | (details: treeView.LoadChildrenDetails<T>) => Promise<T[]> | 加载节点子项的函数 | |
selectedValue | string[] | 受控的已选节点值 | |
selectionMode | 'single' | 'multiple' | "single" | 选择模式:single 只能选择一个节点,multiple 可选择多个节点 |
translations | treeView.IntlTranslations | 无障碍元素及其状态的本地化文案 | |
typeahead | boolean | true | 是否支持输入即查找 |
| 事件 | 载荷 |
|---|---|
focusChange | details: FocusChangeDetails<any> |
checkedChange | details: CheckedChangeDetails |
update:focusedValue | value: string | null |
expandedChange | details: ExpandedChangeDetails<any> |
selectionChange | details: SelectionChangeDetails<any> |
loadChildrenComplete | details: LoadChildrenCompleteDetails<T> |
loadChildrenError | details: LoadChildrenErrorDetails<T> |
renameStart | details: RenameStartDetails<T> |
beforeRename | details: RenameCompleteDetails |
renameComplete | details: RenameCompleteDetails |
update:expandedValue | value: string[] |
update:selectedValue | value: string[] |
update:checkedValue | value: string[] |
#Tree
纯造型的部件——自身没有属性,沿用部件结构的共享样式。