Silver Formily Element Plus

Tip

This component includes compatibility handling for older element-plus versions. No matter which version you use, objects in dataSource should include both label and value when you are not using slots. For older versions, slot rendering still needs the label prop to act as the value.

Markup Schema Example

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'

const form = createForm({
  initialValues: {
    single: true,
    multiple: [1],
  },
})
const { SchemaField, SchemaBooleanField, SchemaArrayField } = createSchemaField(
  {
    components: {
      FormItem,
      Checkbox,
    },
  },
)

async function onSubmit(value: Record<string, any>) {
  console.log(value)
}
</script>

<template>
  <Form :form="form">
    <SchemaField>
      <SchemaBooleanField
        name="single"
        title="Confirm"
        x-decorator="FormItem"
        x-component="Checkbox"
      />
      <SchemaArrayField
        name="multiple"
        title="Checkbox"
        :enum="[
          { label: 'Option 1', value: 1 },
          { label: 'Option 2', value: 2 },
        ]"
        x-decorator="FormItem"
        x-component="Checkbox.Group"
      />
    </SchemaField>
    <Submit @submit="onSubmit">
      Submit
    </Submit>
  </Form>
</template>

Markup Schema Slot Example

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'
import { Fragment, h } from 'vue'

const form = createForm()
const { SchemaField, SchemaBooleanField, SchemaArrayField } = createSchemaField(
  {
    components: {
      FormItem,
      Checkbox,
    },
  },
)

async function onSubmit(value: Record<string, any>) {
  console.log(value)
}
</script>

<template>
  <Form :form="form">
    <SchemaField>
      <SchemaBooleanField
        name="single"
        title="Confirm"
        x-decorator="FormItem"
        x-component="Checkbox"
      />
      <SchemaArrayField
        name="multiple"
        title="Checkbox"
        :enum="[
          { label: 'Option 1', value: 1 },
          { label: 'Option 2', value: 2 },
        ]"
        x-decorator="FormItem"
        x-component="Checkbox.Group"
        :x-content="{
          option: (props, { attrs }) => {
            return h(Fragment, [`Rendered via slot: ${attrs.option.label}`])
          },
        }"
      />
    </SchemaField>
    <Submit @submit="onSubmit">
      Submit
    </Submit>
  </Form>
</template>

JSON Schema Example

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { createSchemaField } from '@silver-formily/vue'

const schema = {
  type: 'object',
  properties: {
    checkbox: {
      'type': 'number',
      'title': 'Confirm',
      'x-decorator': 'FormItem',
      'x-component': 'Checkbox',
    },
    checkboxGroup: {
      'type': 'array',
      'title': 'Checkbox',
      'x-decorator': 'FormItem',
      'x-component': 'Checkbox.Group',
      'enum': [
        {
          label: 'Option 1',
          value: 1,
        },
        {
          label: 'Option 2',
          value: 2,
        },
      ],
    },
  },
}

const form = createForm()
const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    Checkbox,
  },
})

async function onSubmit(value: Record<string, any>) {
  console.log(value)
}
</script>

<template>
  <Form :form="form">
    <SchemaField :schema="schema" />
    <Submit @submit="onSubmit">
      Submit
    </Submit>
  </Form>
</template>

Template Example

<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { Checkbox, Form, FormItem, Submit } from '@silver-formily/element-plus'
import { ArrayField, Field } from '@silver-formily/vue'

const form = createForm()

async function onSubmit(value: Record<string, any>) {
  console.log(value)
}
</script>

<template>
  <Form :form="form">
    <Field
      name="single"
      title="Confirm"
      :decorator="[FormItem]"
      :component="[Checkbox]"
    />
    <ArrayField
      name="multiple"
      title="Checkbox"
      :data-source="[
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
      ]"
      :decorator="[FormItem]"
      :component="[Checkbox.Group, { optionType: 'button' }]"
    />
    <ArrayField
      name="multiple-slot"
      title="Checkbox with Slot"
      :data-source="[
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
      ]"
      :decorator="[FormItem]"
      :component="[Checkbox.Group, { optionType: 'button' }]"
    >
      <template #option="{ option }">
        <div>Rendered via slot: {{ option.label }}</div>
      </template>
    </ArrayField>
    <Submit @submit="onSubmit">
      Submit
    </Submit>
  </Form>
</template>

API

Extended Props

Prop	Type	Description	Default
`optionType`	`enum`	Style type	`'default'`

Checkbox Slot

Slot	Description	Type
`option`	Scoped slot for customizing how each option is rendered	`object`

Checkbox ​

Markup Schema Example ​

Markup Schema Slot Example ​

JSON Schema Example ​

Template Example ​

API ​

Extended Props ​

Checkbox Slot ​