Form Slots

When using FormCreate, extend form functionality and customize components through built-in component slots.

Extending Components Through Slots

scope data structure

interface Scope {
    rule: Rule; // Component generation rule
    prop: VNodeData; // on: events, props: configuration
    children: Vnode[]; // Children
    model: { // Only available after defining field
        value: any; // Form component value
        callback: (value: any) => void; // Form component value update
    };
};

Generate Component Through type

Set the slot name to type-${rule.type} to generate slots based on component type. This method is suitable for scenarios where content needs to be dynamically inserted based on component type.

Generate Component Through field

Set the slot name to field-${rule.field} to generate slots based on component field name. This lets you customize slot content for specific fields, meeting more refined layout and functional requirements.

Note

When using this method, component re-rendering will only be triggered when rendering rules (rule) change.

Extending Component Label Area

scope data structure

interface Scope {
    rule: Rule; // Component generation rule
    title: string; // on: events, props: configuration
    options: Object // Form global configuration
};

Extend form component's label area through the title slot, customize title style and add icon interaction, achieving more flexible form item label display and user interaction experience.

Getting Form Slots

Get and render form slot content in custom components through the formCreateInject.slots() method, achieving dynamic interaction and data transfer between components and form slots.

Note

Slot content can only be used in render functions or template templates. Calling it in other locations may cause exceptions.

Form rendering:

<template>
  <div>
    <form-create v-model="value" :rule="rule" v-model:api="fApi" :option="options">
      <template #content="scope">
        <div class="content">
          Custom content {{ scope }}
        </div>
      </template>
    </form-create>
  </div>
</template>

Custom component:

<template>
  <div>
    {{formCreateInject.slots().content('parameter')}}
  </div>
</template>
<script>
  import {defineComponent} from 'vue';


export default defineComponent({
    data() {
      return {};
    },
    props: {
      //When FormCreate generates custom components
      //It will automatically inject some useful parameters into formCreateInject
      formCreateInject: Object,
    },
  });
</script>