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