EPSelect 下拉选择组件
基础用法
格式化 label
空值格式化（^0.2.5）
多选
全选（需配合 multiple 使用）
虚拟列表
EPSelect 属性
1、代码示例
html
<e-p-select v-model="selectValue" :options="options" />2、配置参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | boolean / string / number/Array | - |
| multiple | 是否多选 | Boolean | false |
| options | 下拉数据源 | Array | [] |
| useVirtual | 是否开启虚拟列表(继承 el-select-v2 属性) | Boolean | false |
3、事件
| 名称 | 说明 | 类型 |
|---|---|---|
| change | 当选中的值改变时触发 | Function(value: any) => void |
| visible-change | 当下拉框出现/消失时触发 | Function(visible: boolean) => void |
| remove-tag | 当在多选模式中删除标签时触发 | Function(tagValue: any) => void |
| clear | 当点击可清除选择框中的清除图标时触发 | Function() => void |
| blur | 当输入框失去焦点时触发 | Function(event: FocusEvent) => void |
| focus | 当输入框获得焦点时触发 | Function(event: FocusEvent) => void |
4、属性继承
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | string / number / boolean / object / array | — |
| multiple | 是否启用多选 | boolean | false |
| disabled | 是否禁用选择框 | boolean | false |
| value-key | 值的唯一标识键名，当值为对象时必填 | string | value |
| size | 输入框大小 | enum | - |
| clearable | 是否可以清除选择 | boolean | false |
| collapse-tags | 是否在多选时将标签折叠为文本 | boolean | false |
| collapse-tags-tooltip ^(2.3.0) | 鼠标悬停折叠标签时是否显示所有选中的标签。使用此功能时，collapse-tags 必须为真 | boolean | false |
| multiple-limit | 当 multiple 为 true 时，用户可选择的最大选项数。设置为 0 时不限制 | number | 0 |
| name | 选择输入框的名称属性 | string | — |
| effect | 工具提示主题，内置主题：dark / light | light | |
| autocomplete | 选择输入框的自动完成属性 | ||
| placeholder | 占位符，默认为 'Select' | string | — |
| filterable | 是否可过滤 | boolean | false |
| allow-create | 是否允许创建新选项。使用此功能时，filterable 必须为真 | boolean | false |
| filter-method | 自定义过滤方法 | Function() => void | — |
| remote | 是否从服务器加载选项 | boolean | false |
| remote-method | 自定义远程搜索方法 | Function() => void | — |
| remote-show-suffix | 在远程搜索方法中显示后缀图标 | boolean | false |
| loading | 是否正在从服务器加载数据 | boolean | false |
| loading-text | 加载数据时显示的文本，默认为 'Loading' | string | — |
| no-match-text | 当没有数据与过滤查询匹配时显示的文本，也可以使用插槽 empty，默认为 'No matching data' | string | — |
| no-data-text | 当没有选项时显示的文本，也可以使用插槽 empty，默认为 'No data' | string | — |
| popper-class | 选择下拉框的自定义类名 | string | '' |
| reserve-keyword | 当 multiple 和 filterable 为 true 时，是否在选择选项后保留当前关键字 | boolean | true |
| default-first-option | 按下回车键时选择第一个匹配的选项。需与 filterable 或 remote 一起使用 | boolean | false |
| teleported | 选择下拉框是否传送到 body | boolean | true |
| append-to ^(2.8.4) | 选择下拉框附加到哪个元素 | string | — |
| persistent | 当选择下拉框不活动且 persistent 为 false 时，选择下拉框将被销毁 | boolean | true |
| automatic-dropdown | 对于非过滤选择框，此属性决定输入框聚焦时选项菜单是否弹出 | boolean | false |
| clear-icon | 自定义清除图标组件 | string / objectComponent | CircleClose |
| fit-input-width | 下拉框的宽度是否与输入框相同 | boolean | false |
| suffix-icon | 自定义后缀图标组件 | string / objectComponent | ArrowDown |
| placement ^(2.2.17) | 下拉框位置 | enum'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | bottom-start | |
| max-collapse-tags ^(2.3.0) | 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 | number | 1 |
| popper-options | popper.js 的参数 | object 参考 popper.js 文档 | {} |
| tag-type | 标签类型 | enum | info |
| tag-effect ^(2.7.7) | 标签效果 | enum'' | 'light' | 'dark' | 'plain' | light | |
| validate-event | 是否触发表单验证 | boolean | true |