Select 选择器
当选项过多时,使用下拉菜单展示并选择内容。
基础用法
基础的选择器用法
请选择
当前选中值:
多选模式
通过设置 multiple 属性可以启用多选模式
当前选中值: []
禁用状态
通过设置 disabled 属性可以禁用整个选择器
禁用状态
包含禁用选项
可清空选择
通过设置 clearable 属性可以启用清空功能,用户可以清除已选项
可清空选择
当前选中值: option1
可过滤选项
通过设置 filterable 属性可以启用过滤功能,用户可以输入关键字快速查找选项
可过滤选项
当前选中值:
自定义模板
可以自定义备选项的显示内容
自定义模板
当前选中值:
不同尺寸
通过设置 size 属性可以使用不同尺寸的选择器
大尺寸:
大尺寸选择器
默认尺寸:
默认尺寸选择器
小尺寸:
小尺寸选择器
自定义宽度
通过设置 width 属性可以自定义选择器的宽度
默认宽度:
默认宽度 100%
200px宽度:
宽度为200px
50%宽度:
宽度为50%
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | String/Number/Array | "" | 绑定值,多选时为数组 |
| multiple | Boolean | false | 是否多选 |
| disabled | Boolean | false | 是否禁用 |
| clearable | Boolean | false | 是否可以清空选项 |
| placeholder | String | "请选择" | 占位文本 |
| filterable | Boolean | false | 是否可搜索 |
| size | String | "default" | 选择器尺寸,可选值:large/default/small |
| width | String | "100%" | 选择器宽度 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:modelValue | (value: String/Number/Array) | 选中值变化时触发 |
| change | (value: String/Number/Array) | 选中值变化时触发 |
| clear | - | 点击清空按钮时触发 |
| blur | - | 失去焦点时触发 |
| focus | - | 获得焦点时触发 |
Option 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String/Number | - | 选项的值,必填 |
| label | String | - | 选项的标签,若不设置则默认与 value 相同 |
| disabled | Boolean | false | 是否禁用该选项 |
插槽
| 插槽名 | 说明 |
|---|---|
| default | Option 组件列表 |
| prefix | 选择器头部内容 |
| empty | 无选项时的列表 |