Select 选择器
当选项过多时,使用下拉菜单展示并选择内容。
这是一个封装过的组件
Select
和Element-Plus
中的ElSelect
有些不一样哦
额外拓展的属性
- 添加了
option
属性,用以定义内部的选项, 使选项更具语义化 - 添加了
optionConfig
属性,用以定义选项的状态value
、label
、disabled
、children
基础使用
下面的例子展示了基础使用以及自定义渲染模板
group 选项组
默认的选项组配置
自定义option数据类型
当我们的数据类型和默认数据类型不相同时,可以使用 optionConfig
来指定数据类型
动态绑定option数据类型
开发中常见的异步获取 select
选项数据
配置选项
Select
完全继承了 ElSelect
的属性 您可以从下面的链接里找到相关文档
typescript
声明
/**
* select props
*/
type VSelectProps = VueProps<typeof ElSelect>
/**
* select
*/
export interface VSelectItem<
T extends object, Key extends DeepKey<T> = DeepKey<T>
> extends VBaseItem<T, Key> {
/**
* props
*/
props?: VPropDef<T, VSelectProps>
/**
* options defalut is {@link VSelectOptions}[]
*/
option?: DynamicDef<T, any[]>
/**
* option
*/
optionConfig?: VSelectOptionConfig
transfer?: VTransfer<Into<T, Key>, string | number>
slots?: {
/**
* slot for render option
*/
option?: (option: any, index: number) => JSX.Element | JSX.Element[] | string
/**
* slot for render group option
*/
optionGroup?: (option: any, index: number) => string
prefix?: () => JSX.Element | JSX.Element[] | string
empty?: () => JSX.Element | JSX.Element[] | string
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38