直接跳到内容

DirectoryTree 目录树

DirectoryTree 以树形结构展示文件系统目录,支持文件/目录点击选中事件,以及通过 filter_query 按文件名子串过滤,适合构建文件浏览器或项目浏览工具。

底层:Textual DirectoryTreetextual_vuepy 扩展为可过滤的 FilterableDirectoryTree

基本用法

Props

属性类型默认值说明
pathstr | Path必填,要展示的根目录路径(绝对路径或相对路径均可)
filter_querystr""文件名过滤子串(大小写不敏感);空字符串表示不过滤。变更后会自动 reload

v-model

v-model 默认绑定属性:path

通过 v-model 可动态切换展示的根目录路径。

事件

事件说明
@directory_tree_file_selected文件节点被选中时触发(DirectoryTree.FileSelected),event.pathPath 对象
@directory_tree_directory_selected目录节点被选中时触发(DirectoryTree.DirectorySelected),event.pathPath 对象

文件过滤示例

与 Tree 组件对比

特性DirectoryTreeTree
数据来源文件系统(自动)手动构建
懒加载子目录✓(自动)可手动实现
文件过滤✓(filter_query 子串)
自定义节点数据

通用属性

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

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