vform-element

CheckboxGroup 多选框

在一组备选项中进行多选。

这是一个封装过的组件

CheckboxGroup和Element-Plus中的CheckboxGroup有些不一样哦

额外拓展的属性

  • 添加了 isButton 属性，用以切换 Checkbox 和 CheckboxButton 展示类型
  • 添加了 option 属性，用以定义内部的选项, 使选项更具语义化
  • 添加了 optionConfig 属性，用以定义选项的状态 value、label、disabled、name

默认Option类型

使用 options 定义选项，options 的默认 typescript 声明如下

export interface Option {
  /** 展示的文字 */
  label: string
  /** 值 */
  value: any
  /** 禁用状态 */
  disabled?: bo
  /** 源生name属性 */
  name?: string
}
1
2
3
4
5
6
7
8
9
10

自定义Option类型

options 类型并不是固定不变的，如果你的数据格式不是这样的，您可以使用 optionProps 来告诉我们如何设置

optionConfig 的 typescript 声明如下

export interface OptionConfig {
  /**
    * label 字段名
    */
  label?: string
  /**
    * value 字段名
    */
  value?: string
  /**
    * 源生name字段名
    */
  name?: any
  /**
    * 禁用字段名
    */
  disabled?: string
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

展示为按钮

设置 isButton 即可以切换 checkbox 为按钮样式

自定义渲染option

通过设置slots.option即可自定义选项的文字渲染

 slots: {
    option(item) {
      return <span>{item.label}-{item.value}</span>
    }
  }
1
2
3
4
5

配置选项

CheckboxGroup 完全继承了 ElCheckboxGroup的属性 您可以从下面的链接里找到相关文档

额外拓展的属性

  • 添加了 isButton 属性，用以切换 Checkbox 和 CheckboxButton展示类型
  • 添加了 option 属性，用以定义内部的选项, 使选项更具语义化
  • 添加了 optionConfig 属性，用以定义选项的状态 value、label、disabled、name

typescript声明 

type VCheckboxGroupProps = VueProps<typeof ElCheckboxGroup>

export interface VCheckboxGroupItem<
  T extends object,
  Key extends DeepKey<T> = DeepKey<T>,
  > extends VBaseItem<T, Key> {
  /**
   * 类型  cascader
   */
  props?: VPropDef<T, VCheckboxGroupProps>,
  /**
   * 是否是 checkboxButton
   */
  isButton?: DynamicDef<T, boolean>
  /**
   * 是否展示border
   *
   * 只有`isButton`为`false`生效
   */
  border?: DynamicDef<T, boolean>
  /**
   * 选项 默认是 {@link VCommonOption}
   *
   * 为了`ts`验证，所以使用了`any`
   */
  options?: DynamicDef<T, VCommonOption[]> | DynamicDef<T, any[]>
  /**
   * 可选项配置
   */
  optionConfig?: VCommonOptionConfig
  /**
   * 插槽
   */
  slots?: {
    /**
     * 自定义展示模板
     */
    default?(): (JSX.Element | JSX.Element[] | string)
    /**
     * 无匹配选项时的内容
     */
    option?(option: any): (JSX.Element | JSX.Element[] | string)
  }
  /**
   * 数据转换
   */
  transfer?: VTransfer<Into<T, Key>, any>
}
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
39
40
41
42
43
44
45
46
47
48