vform-element

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