Checkbox

• 示例
  • Checkbox 类型
  • 表单校验
• Checkbox 的 formItem 配置

示例

Checkbox 类型

checkbox

label1label2label3

checkboxBorder

label1label2label3

checkboxButton

label1label2label3

<script setup>
import { reactive } from 'vue'

let dynamicForm = reactive({
  form: [
    {
      name: 'checkbox',
      label: 'checkbox',
      value: [],
      element: 'checkbox',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
        { label: 'label3', value: 'value3' },
      ],
    },
    {
      name: 'checkboxBorder',
      label: 'checkboxBorder',
      value: [],
      element: 'checkbox',
      elementType: 'borderBox',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
        { label: 'label3', value: 'value3' },
      ],
    },
    {
      name: 'checkboxButton',
      label: 'checkboxButton',
      value: [],
      element: 'checkbox',
      elementType: 'buttonBox',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
        { label: 'label3', value: 'value3' },
      ],
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" :label-width="'120px'" @save="submit" />
</template>

显示代码

复制代码片段

表单校验

checkbox

label1label2label3

checkboxBorder

label1label2label3

checkboxButton

label1label2label3

<script setup>
import { reactive } from 'vue'

let dynamicForm = reactive({
  form: [
    {
      name: 'checkbox',
      label: 'checkbox',
      value: [],
      element: 'checkbox',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
        { label: 'label3', value: 'value3' },
      ],
      rules: [{ required: true, trigger: 'change' }],
    },
    {
      name: 'checkboxBorder',
      label: 'checkboxBorder',
      value: [],
      element: 'checkbox',
      elementType: 'borderBox',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
        { label: 'label3', value: 'value3' },
      ],
      rules: [{ required: true, trigger: 'change' }],
    },
    {
      name: 'checkboxButton',
      label: 'checkboxButton',
      value: [],
      element: 'checkbox',
      elementType: 'buttonBox',
      options: [
        { label: 'label1', value: 'value1' },
        { label: 'label2', value: 'value2' },
        { label: 'label3', value: 'value3' },
      ],
      rules: [{ required: true, trigger: 'change' }],
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" :label-width="'150px'" @save="submit" />
</template>

显示代码

复制代码片段

Checkbox 的 formItem 配置

属性	说明	可选值	默认值
elementType	二级类型	checkbox、borderBox、buttonBox	checkbox
attr	checkbox-group 的配置	—	—
options	checkbox 列表	—	—
optionsItem.attr	checkbox 的配置	—	—

🎉 其他参考通用配置