Select 下拉选择框
规则
基础示例（单选）
多选
Props 配置示例
整段禁用
可清空 + 可搜索
尺寸对比（迷你 / 小 / 中）
Events 示例
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| all-text | string | — | 全部选项显示文本 |
| allow-copy | boolean | false | 是否允许复制输入框内容 |
| allow-create | boolean | false | 是否允许创建新条目 |
| autocomplete | string | 'off' | 原生 autocomplete |
| cache-op | ICacheOp | { key: '', sortBy: 'frequency', sort: 'desc', dataKey: 'value', highlightClass: 'memorize-highlight', highlightNum: Infinity, cacheNum: Infinity, serialize: JSON.stringify deserialize: JSON.parse } | 本地缓存已选项功能配置 |
| clear-no-match-value | boolean | false | 是否自动清空无法匹配项的值 |
| clearable | boolean | false | 是否启用一键清除 |
| click-expend | boolean | false | 点击展开/收起不全选项（多选） |
| collapse-tags | boolean | false | 多选标签折叠 |
| copyable | boolean | false | 是否启用一键复制（多选） |
| default-first-option | boolean | false | Enter 选择第一个匹配项 |
| disabled | boolean | false | 是否禁用 |
| display-only | boolean | false | 只显示文字 |
| dropdown-icon | Component | — | 自定义下拉图标 |
| dropdown-style | String | — | 自定义下拉选项样式 |
| filter-method | (query: string) => void | — | 自定义过滤方法 |
| filterable | boolean | false | 是否可搜索 |
| grid-op | IGridOption | — | 下拉表格配置 |
| hover-expand | boolean | false | 多选标签悬浮展开 |
| init-label | string | — | 远程或懒加载未获取数据时显示的初始化 label |
| input-box-type | 'input' | 'underline' | 'input' | 输入框显示类型 |
| is-drop-inherit-width | boolean | false | 下拉弹框宽度是否继承输入框 |
| loading | boolean | false | 是否加载中 |
| loading-text | string | '加载中' | 远程加载提示 |
| max-tag-width | string | — | 多选最大标签宽度 |
| max-visible-rows | number | 1 | 多行最大显示行数 |
| multiple | boolean | false | 是否多选 |
| multiple-limit | number | 0 | 多选最大可选数 |
| name | string | — | 原生 name |
| no-data-text | string | '暂无相关数据' | 无数据文本 |
| no-match-text | string | '无匹配数据' | 无匹配文本 |
| optimization | boolean | false | 虚拟滚动（大数据） |
| options | IOption[] | — | 选项列表 |
| placeholder | string | '请选择' | 占位符 |
| placement | IPlacement | 'bottom-start' | 弹出位置 |
| popper-append-to-body | boolean | true | 插入 body |
| popper-class | string | — | 下拉框类名 |
| popper-options | IPopperOption | 弹出层参数 | |
| remote | boolean | false | 是否远程搜索 |
| remote-method | (query: string) => void | — | 远程搜索方法 |
| render-type | 'tree' | 'grid' | — | 渲染类型 |
| reserve-keyword | boolean | false | 选中后是否保留搜索词 |
| searchable | boolean | false | 下拉面板搜索 |
| show-all-text-tag | boolean | false | 全选后只显示 all-text 的 Tag |
| show-alloption | boolean | true | 是否展示“全选”选项 |
| show-empty-image | boolean | false | 是否显示空数据图片 |
| show-limit-text | boolean | false | 是否展示限制数量提示 |
| show-proportion | boolean | false | 是否展示占比提示 |
| size | 'medium' | 'small' | 'mini' | — | 输入框尺寸 |
| tag-selectable | boolean | false | 标签是否可选中复制 |
| tag-type | 'success' | 'info' | 'warning' | 'danger' | — | 标签类型（多选） |
| text-field | string | 'label' | 显示值字段 |
| text-split | string | ',' | 复制文本分隔符 |
| top-create | boolean | — | 是否显示顶部新增按钮 |
| tree-op | ITreeOption | — | 下拉树配置 |
| value-field | string | 'value' | 绑定值字段 |
| value-key | string | 'value' | value 唯一标识键名 |
Events
| 名称 | 类型 | 说明 |
|---|---|---|
| blur | (event: MouseEvent) => void | 失去焦点 |
| change | (value: string|number|Array<string|number>, list: Array<IOption|ITreeNode>) => void | 绑定值变更 |
| clear | () => void | 一键清除 |
| focus | (event: MouseEvent) => void | 获得焦点 |
| remove-tag | (tag: string|number) => void | 移除标签（多选） |
| top-create-click | () => void | 顶部新增按钮点击 |
| visible-change | (status: boolean) => void | 下拉显示/隐藏 |