Select 选择器
基础用法
有禁用选项
在 option 中，设定 disabled 值为 true ，即可禁用该选项
有禁用选项
为 dd-select 设置 disabled 属性，则整个选择器不可用。
可清空单选
为 dd-select 设置 clearable 属性，则可将选择器清空。
无边框
无边框样式。
后缀图标
基础多选
为 dd-select 设置 multiple 属性即可启用多选， 此时 v-model 的值为当前选中值所组成的数组。
筛选选项
可以利用筛选功能快速查找选项。 为 dd-select 添加 show-search 属性即可启用搜索功能。 filter-option 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。
自定义模板
将自定义的 HTML 模板插入 dd-select 的 slot 中即可。
远程搜索
输入关键字以从远程服务器中查找数据。
大数据
dd-select 默认使用了虚拟滚动技术
Select API
Select Attributes
| Name | Description | Type | Default | Version |
|---|---|---|---|---|
| value(v-model) | 绑定值 | string | number | string[] | number[] | — | |
| options | 通过 option ，自定义节点 | { value: any; label?: any; disabled?: boolean; title?: any }[] | — | |
| showSearch | 配置是否可搜索 | boolean | false | |
| placeholder | 输入框占位文本 | string | — | |
| disabled | 禁用 | boolean | false | |
| size | 输入框尺寸 | large | default | small | — | |
| filterOption | 是否根据输入项进行筛选。 | Function(inputValue, option) | true | |
| multiple | 多选模式 | boolean | false | |
| clearable | 是否可以清空选项 | boolean | false | |
| maxTagCount | 最多显示多少个 tag | number | — | |
| bordered | 无边框样式 | boolean | false | |
| generate | 是否立即生成组件示例 | boolean | false |
Select Events
| Name | Description | Type |
|---|---|---|
| change | 仅当 modelValue 改变时 | (value, option) => void |
| select | 被选中时调用 | (value, option) => void |
| search | 文本框值变化时回调 | (value) => void |
| deselect | 取消选中时调用，仅在 multiple | (value, option) => void |
| remove-tag | 移除 tag 时触发，仅在 multiple | (value, option) => void |
| input | 在 Input 值改变时触发 | (value) => void |
| clear | 在点击由 clearable 属性生成的清空按钮时触发 | () => void |
| dropdown-visible-change | 下拉框出现/隐藏时触发 | (visible) => void |
| blur | 当 input 失去焦点时触发 | (e) => void |
| focus | 当 input 获得焦点时触发 | (e) => void |
Select Slots
| Name | Description |
|---|---|
| dropdownRender | 自定义内容 |
| suffixIcon | 后缀图标 |
贡献者
lazy