Skip to content

Select 选择器

该组件是低代码平台中用于从预定义或动态加载的选项列表中进行单选或多选的核心表单项,基于 Element Plus 的 <el-select> 封装,支持本地字典、远程搜索、多选标签定制、筛选及缓存回显,并深度集成表单容器(<el-form>)的数据绑定与校验体系。

基础属性

属性类型说明
是否支持一键清空 clearableboolean显示“×”按钮,点击清空已选项(默认开启)
前缀图标 prefixIconstring显示在选择框左侧的图标(如 'ep:menu'
是否支持多选 multipleboolean允许同时选择多个选项
是否折叠标签 collapseTagsboolean多选时超出数量的标签折叠为“+N”(仅当多选启用时生效)
最多显示的标签数量 maxCollapseTagsnumber折叠前最多显示的标签数(整数,仅多选时生效)
最多可选择项目数 multipleLimitnumber限制多选模式下最大可选项数量(仅多选时生效)
标签类型 tagTypeenum多选标签样式(如 primarysuccess 等,仅多选时生效)
标签效果 tagEffectenum多选标签视觉效果(如 darklightplain,仅多选时生效)
是否支持筛选 filterableboolean允许通过输入关键词过滤选项
是否远程加载 remoteboolean启用后从函数动态加载选项(常用于大数据量场景)
字典类型 dictTypestring本地数据源标识,用于加载预设选项(仅当未启用远程加载时生效)
选项加载函数 remoteMethodfunction远程模式下调用;$args[0] 为用户输入的查询值,需返回 { label, value, disabled } 格式的选项数组(异步支持)
缓存选项加载函数 loadCacheDatafunction用于回显已保存的值(如编辑表单时);$args[0] 为当前绑定的值(可能是数组),需返回对应选项数据(仅当 remote && filterable 时生效)
输入提示文本 placeholderstring未选择时的占位提示文字
表单项基础配置包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine

💡 远程 + 筛选典型流程

  1. 用户输入 → 触发 remoteMethod(query) 加载匹配项;
  2. 表单回显(如编辑)→ 调用 loadCacheData(value) 获取已选项的完整信息用于展示。

高级属性

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

事件

事件触发时机说明
change所选值发生变化时返回当前选中的值(单选为 value,多选为 value[]