Skip to content

TreeSelect 树形选择

该组件是低代码平台中用于从层级结构数据中进行单选或多选的高级表单项,基于 Element Plus 的 <el-tree-select> 封装,支持懒加载、筛选、标签定制等功能,并深度集成表单容器(<el-form>)的数据绑定与校验体系。

基础属性

属性类型说明
是否支持一键清空 clearableboolean显示“×”按钮,点击清空已选项(默认开启)
前缀图标 prefixIconstring'ep:tree',显示在选择框左侧
是否支持多选 multipleboolean允许同时选择多个节点
是否折叠标签 collapseTagsboolean多选时超出数量的标签折叠为“+N”(仅当多选启用时生效)
最多显示的标签数量 maxCollapseTagsnumber折叠前最多显示的标签数(整数,仅多选时生效)
最多可选择项目数 multipleLimitnumber多选模式下允许选择的最大节点数(仅多选时生效)
标签类型 tagTypeenum多选标签样式(如 primarysuccess 等,仅多选时生效)
标签效果 tagEffectenum多选标签视觉效果(如 darklightplain,仅多选时生效)
是否默认展开所有节点 defaultExpandAllboolean初始化时展开全部树节点
是否显示复选框 showCheckboxboolean在节点前显示复选框
是否父子不互相关联选择 checkStrictlyboolean启用后父节点与子节点的选择状态相互独立
是否支持筛选 filterableboolean允许通过输入关键词过滤树节点
数据搜索函数 filterMethodfunction自定义筛选逻辑;$args[0] 为查询值,需返回匹配的树节点数组(仅当启用筛选时生效)
是否懒加载 lazyboolean按需加载子节点数据,适用于大型树结构
数据加载函数 loadDatafunction懒加载时调用;$args[0] 为当前节点数据,需返回其子节点数组
缓存数据加载函数 loadCacheDatafunction懒加载模式下用于回显已选值;$args[0] 为绑定的值,需返回完整路径节点数组(仅懒加载时生效)
输入提示文本 placeholderstring未选择时的占位提示文字
表单项基础配置包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine

高级属性

属性类型说明
表单项高级配置包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine

事件

事件触发时机说明
change所选节点值发生变化时对应 Element Plus 的 change 事件