2020-02-04 20:32:03 +08:00
|
|
|
# 选择器 Select
|
|
|
|
选点啥!
|
|
|
|
## 演示
|
2019-09-25 12:19:57 +08:00
|
|
|
```demo
|
|
|
|
basic
|
2020-02-04 20:32:03 +08:00
|
|
|
size
|
|
|
|
multiple
|
|
|
|
events
|
|
|
|
filterable
|
2020-03-14 17:48:54 +08:00
|
|
|
tag
|
2020-02-04 20:32:03 +08:00
|
|
|
remote
|
|
|
|
remote-multiple
|
|
|
|
clearable
|
|
|
|
scroll-event
|
|
|
|
group
|
|
|
|
many-options
|
|
|
|
custom-option
|
|
|
|
action
|
2020-04-29 22:05:35 +08:00
|
|
|
fallback-option
|
2020-05-28 11:58:30 +08:00
|
|
|
change-debug
|
2020-07-23 18:50:36 +08:00
|
|
|
placeholder-debug
|
2020-09-03 12:20:19 +08:00
|
|
|
menu-debug
|
2019-09-25 12:19:57 +08:00
|
|
|
```
|
2020-02-04 20:32:03 +08:00
|
|
|
|
|
|
|
## Props
|
2020-02-07 23:40:07 +08:00
|
|
|
|名称|类型|默认值|说明|
|
2020-02-04 20:32:03 +08:00
|
|
|
|-|-|-|-|
|
|
|
|
|clearable|`boolean`|`false`||
|
|
|
|
|disabled|`boolean`|`false`||
|
2020-05-28 14:18:50 +08:00
|
|
|
|fallback-option|`false \| (value: string \| number) => SelectOption`|`value => ({ label: '' + value, value })`|在传入的选项中没有对应当前值的选项时,这个值应该对应的选项。如果设为 `false`,不会为找不到对应选项的值生成回退选项也不会显示它,未在选项中的值会被视为不合法,操作过程中会被组件清除掉|
|
|
|
|
|filterable|`boolean`|`false`|是否可以过滤|
|
2020-10-01 01:53:57 +08:00
|
|
|
|filter|`(pattern: string, option: Object) => boolean`|一个简单的字符串搜索算法||
|
2020-05-28 14:18:50 +08:00
|
|
|
|loading|`boolean`|`false`||
|
|
|
|
|multiple|`boolean`|`false`||
|
2020-02-04 20:32:03 +08:00
|
|
|
|options|`Array<SelectOption \| SelectOptionGroup>`|`[]`||
|
2020-05-28 14:18:50 +08:00
|
|
|
|placeholder|`string`|`'请选择'`||
|
2020-03-14 17:48:54 +08:00
|
|
|
|remote|`boolean`|`false`|是否要异步获取选项。注意如果设定了,那么 `fitler` 和 `tag` 都不会对 `options` 生效。这个时候你在全权控制 `options`|
|
2020-05-28 14:18:50 +08:00
|
|
|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
2020-03-14 17:48:54 +08:00
|
|
|
|tag|`boolean`|`false`|是否可以创建新的选项,需要和 `filterable` 一起使用|
|
2020-10-23 15:01:01 +08:00
|
|
|
|theme|`'light' \| 'dark' \| string`|`undefined`||
|
2020-05-28 14:18:50 +08:00
|
|
|
|value|`Array<string \| number> \| string \| number`|`false`||
|
2020-10-01 01:53:57 +08:00
|
|
|
|on-blur|`() => any`|选择器 Blur 时发出|
|
2020-10-22 13:01:40 +08:00
|
|
|
|on-create|`(label: string) => SelectOption`|`label => ({ label, value: label })`|在输入内容时如何创建一个选项。注意 `filter` 对这个生成的选项同样会生效。同时确保这个选项和其他选项的 `value` 不要有重复|
|
2020-10-01 01:53:57 +08:00
|
|
|
|on-focus|`() => any`|选择器 Focus 时发出|
|
|
|
|
|on-scroll|`(e: ScrollEvent) => any`|选择菜单在滚动|
|
|
|
|
|on-search|`(value: string) => any`||
|
|
|
|
|on-update:value|`(value: Array \| string \| number \| null) => any`||
|
2020-03-14 17:48:54 +08:00
|
|
|
|
2020-03-20 14:19:29 +08:00
|
|
|
### SelectOption Properties
|
|
|
|
|名称|类型|说明|
|
2020-02-04 20:32:03 +08:00
|
|
|
|-|-|-|
|
2020-05-28 13:51:35 +08:00
|
|
|
|class|`string`||
|
2020-02-04 20:32:03 +08:00
|
|
|
|disabled|`boolean`||
|
2020-05-28 13:51:35 +08:00
|
|
|
|label|`string`||
|
2020-10-28 22:40:41 +08:00
|
|
|
|render|`(option: SelectOption) => VNode`||
|
2020-05-28 13:51:35 +08:00
|
|
|
|style|`string`||
|
|
|
|
|value|`string \| number`|在选项中应该是唯一的|
|
2020-02-04 20:32:03 +08:00
|
|
|
|
2020-03-20 14:19:29 +08:00
|
|
|
### SelectOptionGroup Properties
|
|
|
|
|名称|类型|说明|
|
2020-02-04 20:32:03 +08:00
|
|
|
|-|-|-|
|
|
|
|
|children|`Array<SelectOption>`||
|
2020-05-28 13:51:35 +08:00
|
|
|
|name|`string`||
|
2020-10-28 22:40:41 +08:00
|
|
|
|render|`(option: SelectOption) => VNode`||
|
2020-05-28 13:51:35 +08:00
|
|
|
|type|`'group'`||
|
2020-02-04 20:32:03 +08:00
|
|
|
|
|
|
|
## Slots
|
2020-02-14 23:06:50 +08:00
|
|
|
|名称|参数|说明|
|
|
|
|
|-|-|-|
|
|
|
|
|action|`()`||
|
2020-02-04 20:32:03 +08:00
|
|
|
|
|
|
|
|