直接跳到内容

Tree 树形结构组件

Tree 以可折叠的树形结构展示层级数据,支持键盘导航和节点展开/折叠操作,适合文件系统、组织架构、JSON 结构等场景。

底层:Textual Tree

基本用法

Props

属性类型默认值说明
labelstr"Tree"根节点显示的标签文字

v-model

v-model 默认绑定属性:data

可通过 v-model 绑定树形结构数据(通常为嵌套字典/列表),或在 onMounted 钩子中通过 ref 手动构建树。

事件

事件说明
@tree_node_selected节点被 Enter 选中时触发(Tree.NodeSelected),event.node 为被选节点,event.node.label 为节点标签
@tree_node_expanded节点被展开时触发(Tree.NodeExpanded),event.node 为被展开节点
@tree_node_collapsed节点被折叠时触发(Tree.NodeCollapsed),event.node 为被折叠节点

通过 ref 操作节点

树的节点通过 ref 获取底层 Textual widget 后,使用以下方法构建和操作:

方法说明
tree.root.add(label, data=None, expand=False)在根节点下添加可展开的子节点
tree.root.add_leaf(label, data=None)在根节点下添加叶子节点(不可展开)
node.add(label, data=None)在任意节点下添加子节点
node.add_leaf(label, data=None)在任意节点下添加叶子节点
tree.root.expand()展开根节点
tree.root.expand_all()展开全部节点
tree.root.collapse()折叠根节点
node.data节点附带的自定义数据(任意类型)

复杂树示例

通用属性

所有 Textual-vuepy 组件均支持以下属性:

属性类型说明
idstr组件 CSS ID
stylestrTCSS 内联样式
classstrTCSS 类名(空格分隔)
border_titlestr边框标题
border_subtitlestr边框副标题
Tree 树形结构组件已经加载完毕