Form Props

When using FormCreate, you can customize form behavior and appearance through various props. These parameters allow you to control form generation rules, configuration options, two-way data binding, etc., providing powerful support for complex form scenarios.

Note

Form props need to be wrapped with ref to achieve reactivity, cannot be directly placed in computed properties. rule cannot be placed in computed properties!!!

When rendering forms in dialogs, it is recommended to deep copy rules before use to avoid data pollution issues caused by multiple references.

Props Parameter Description Table

The following are commonly used props parameters and their detailed descriptions:

Property Name	Type	Default Value	Description
rule	Array<Rule>	[]	Form generation rules, define field types, names, validation rules, etc. Must follow Form Generation Rules format.
option	Object	{}	Form global configuration (such as submit events, layout methods, etc.). See Global Configuration Options for details.
modelValue(v-model)	Object	-	Two-way bind form data through v-model, synchronize values in real-time, such as v-model="formData".
api(v-model:api)	Api	-	Get form instance (api) through v-model:api, call form operation methods, such as v-model:api="formApi".
locale	string | Object	-	Configure multi-language, supports language codes (such as "zh-CN") or custom language packages.
t	Function	-	Custom multi-language retrieval function.
name	string	-	Form unique name, used to get instance through formCreate.getApi(name).
index	string | number	-	Form unique identifier, automatically clears form data when changed.
disabled	boolean	false	Globally disable form, all fields are not editable. Priority is higher than field-level disabled configuration.
subForm	boolean	true	Mark whether it is a sub-form, control whether to synchronize validation/submission with parent form. Must be explicitly set to true when nesting forms.
extendOption	boolean	true	Whether sub-form inherits parent form's global configuration (such as submitBtn, validateOnSubmit). If independent sub-form configuration is needed, can be set to false.
driver	string | object	-	Custom form rendering logic, override default behavior.
inFor	boolean	false	Mark whether form is rendered in v-for loop.

Note

Only after the form component completes rendering can the correct API instance be obtained. Please confirm the rendering state before use.

Examples

Render Form Through Rules

Define form rendering rules through rule parameter

<template>
    <form-create :rule="rule"/>
</template>
<script setup>
    import {ref} from 'vue';
    //表单规则
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称',
            value: 'form-create'
        },
        {
            type: 'checkbox',
            field: 'label',
            title: '标签',
            value: [0, 1, 2, 3],
            options: [
                {label: '好用', value: 0},
                {label: '快速', value: 1},
                {label: '高效', value: 2},
                {label: '全能', value: 3},
            ]
        },
        {
            type: 'el-button',
            title: '自定义按钮',
            native: false,
            on: {
                click() {
                    alert('点击了按钮')
                }
            },
            children: ['按钮']
        },
    ]);
</script>

配置表单参数

通过 option 参数可配置表单整体行为

<template>
    <form-create :rule="rule" :option="options"/>
</template>
<script setup>
    import {ref} from 'vue';
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称',
            value: 'form-create'
        },
        {
            type: 'checkbox',
            field: 'label',
            title: '标签',
            value: [0, 1, 2, 3],
            options: [
                {label: '好用', value: 0},
                {label: '快速', value: 1},
                {label: '高效', value: 2},
                {label: '全能', value: 3},
            ]
        },
        {
            type: 'el-button',
            title: '自定义按钮',
            native: false,
            on: {
                click() {
                    alert('点击了按钮')
                }
            },
            children: ['按钮']
        },
    ]);
    //表单配置
    const options = ref({
        onSubmit: (formData) => {
            alert(JSON.stringify(formData))
        },
        form: {
            labelPosition: 'top'
        },
        resetBtn: true
    });
</script>

获取表单 API

使用 v-model:api 获取表单操作对象 api

<template>
    <form-create :rule="rule" v-model:api="api" :option="options"/>
</template>
<script setup>
    import {ref, onMounted} from 'vue';
    const api = ref(null);
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称',
            value: 'form-create'
        },
        {
            type: 'checkbox',
            field: 'label',
            title: '标签',
            value: [0, 1, 2, 3],
            options: [
                {label: '好用', value: 0},
                {label: '快速', value: 1},
                {label: '高效', value: 2},
                {label: '全能', value: 3},
            ]
        },
        {
            type: 'el-button',
            title: '自定义按钮',
            native: false,
            on: {
                click() {
                    alert('点击了按钮')
                }
            },
            children: ['按钮']
        },
    ]);
    const options = ref({
        onSubmit: (formData) => {
            alert(JSON.stringify(formData))
        },
        resetBtn: true
    });
    onMounted(() => {
        api.value.setValue({
            goods_name: 'goods_name',
        })
    });
</script>

通过name获取表单API

使用 name 值获取表单操作对象 api

<template>
    <form-create name="demo"/>
</template>
<script setup>
    import {onMounted} from 'vue';
    onMounted(() => {
        const api = formCreate.getApi('demo');
    })
</script>

禁用表单

通过 disabled 定义表单整体禁用状态

<template>
    <div>
        <form-create :disabled="disabled" :rule="rule" v-model:api="api" :option="options"/>
        <el-button @click="disabled = !disabled">禁用</el-button>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    const api = ref(null);
    const disabled = ref(false);
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称',
            value: 'form-create'
        },
        {
            type: 'checkbox',
            field: 'label',
            title: '标签',
            value: [0, 1, 2, 3],
            options: [
                {label: '好用', value: 0},
                {label: '快速', value: 1},
                {label: '高效', value: 2},
                {label: '全能', value: 3},
            ]
        },
        {
            type: 'el-button',
            title: '自定义按钮',
            native: false,
            on: {
                click() {
                    alert('点击了按钮')
                }
            },
            children: ['按钮']
        },
    ]);
    const options = ref({
        onSubmit: (formData) => {
            alert(JSON.stringify(formData))
        },
        resetBtn: true
    });
</script>