TreeSelect 树形选择
该组件是低代码平台中用于从层级结构数据中进行单选或多选的高级表单项,基于 Element Plus 的 <el-tree-select> 封装,支持懒加载、筛选、标签定制等功能,并深度集成表单容器(<el-form>)的数据绑定与校验体系。
基础属性
| 属性 | 类型 | 说明 |
|---|---|---|
是否支持一键清空 clearable | boolean | 显示“×”按钮,点击清空已选项(默认开启) |
前缀图标 prefixIcon | string | 如 'ep:tree',显示在选择框左侧 |
是否支持多选 multiple | boolean | 允许同时选择多个节点 |
是否折叠标签 collapseTags | boolean | 多选时超出数量的标签折叠为“+N”(仅当多选启用时生效) |
最多显示的标签数量 maxCollapseTags | number | 折叠前最多显示的标签数(整数,仅多选时生效) |
最多可选择项目数 multipleLimit | number | 多选模式下允许选择的最大节点数(仅多选时生效) |
标签类型 tagType | enum | 多选标签样式(如 primary、success 等,仅多选时生效) |
标签效果 tagEffect | enum | 多选标签视觉效果(如 dark、light、plain,仅多选时生效) |
是否默认展开所有节点 defaultExpandAll | boolean | 初始化时展开全部树节点 |
是否显示复选框 showCheckbox | boolean | 在节点前显示复选框 |
是否父子不互相关联选择 checkStrictly | boolean | 启用后父节点与子节点的选择状态相互独立 |
是否支持筛选 filterable | boolean | 允许通过输入关键词过滤树节点 |
数据搜索函数 filterMethod | function | 自定义筛选逻辑;$args[0] 为查询值,需返回匹配的树节点数组(仅当启用筛选时生效) |
是否懒加载 lazy | boolean | 按需加载子节点数据,适用于大型树结构 |
数据加载函数 loadData | function | 懒加载时调用;$args[0] 为当前节点数据,需返回其子节点数组 |
缓存数据加载函数 loadCacheData | function | 懒加载模式下用于回显已选值;$args[0] 为绑定的值,需返回完整路径节点数组(仅懒加载时生效) |
输入提示文本 placeholder | string | 未选择时的占位提示文字 |
| 表单项基础配置 | — | 包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine) |
高级属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 表单项高级配置 | — | 包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine) |
事件
| 事件 | 触发时机 | 说明 |
|---|---|---|
change | 所选节点值发生变化时 | 对应 Element Plus 的 change 事件 |
