表单的参数

在使用 FormCreate 时，您可以通过各种 props 来定制表单的行为和外观。这些参数允许您控制表单的生成规则、配置选项、双向数据绑定等，为复杂的表单场景提供了强大的支持。

Props 参数说明表

以下是常用的 props 参数及其详细说明：

属性名	类型	默认值	作用说明	注意事项
rule	Array<Rule>	[]	表单生成规则，定义字段类型、名称、验证规则等。	需遵循 表单生成规则 格式，支持动态更新。
option	Object	{}	表单全局配置（如提交事件、布局方式等）。	详见 全局配置选项。
modelValue(v-model)	Object	-	通过 v-model 双向绑定表单数据，实时同步值。	需配合 v-model 使用，如 v-model="formData"。
api(v-model:api)	Api	-	通过 v-model:api 获取表单实例（fApi），调用表单操作方法。	需在模板中显式绑定，如 v-model:api="formApi"。
locale	string | Object	-	配置多语言，支持语言代码（如 "zh-CN"）或自定义语言包。	若为对象，需包含完整的翻译键值对；全局配置优先级更高。
name	string	-	表单唯一名称，用于通过 formCreate.getApi(name) 获取实例。	同一页面内名称需唯一，避免冲突。
index	string | number	-	表单唯一标识，变化时自动清空表单数据。	适用于动态表单重置场景（如切换编辑项）。
disabled	boolean	false	全局禁用表单，所有字段不可编辑。	优先级高于字段级 disabled 配置。
subForm	boolean	true	标记是否为子表单，控制是否与父表单同步验证/提交。	嵌套表单时需显式设置为 true。
extendOption	boolean	true	子表单是否继承父表单的全局配置（如 submitBtn、validateOnSubmit）。	若需独立配置子表单，可设置为 false。
driver	string | object	-	自定义表单渲染逻辑，覆盖默认行为（如指定第三方渲染器）。	需实现约定的渲染接口，通常用于复杂定制场景。
inFor	boolean	false	标记表单是否在 v-for 循环中渲染，确保唯一性。	动态生成表单时必须设置为 true，避免状态混乱。

示例

通过规则渲染表单

通过 rule 参数可以定义表单的渲染规则

<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="fApi" :option="options"/>
        <el-button @click="disabled = !disabled">禁用</el-button>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    const fApi = 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>