修改表单默认配置

在设计器中，您可以通过 config.formOptions 来修改表单的全局配置，从而实现更高的自定义和控制。这些配置选项将影响所有使用该设计器的表单组件。

数据结构

formOptions 提供了多种配置选项，用于调整表单的外观和行为。以下是其数据结构的简单介绍：

type Options = {
    //表单配置
    form?: {
        //标签的位置
        labelPosition?: string;
        //标签的宽度
        labelWidth?: string;
        //标签的前缀
        labelSuffix?: string;
        //隐藏必填字段的标签旁边的红色星号
        hideRequiredAsterisk?: boolean;
        //显示校验错误信息
        showMessage?: boolean;
        //以行内形式展示校验信息
        inlineMessage?: boolean;
        //表单的尺寸
        size?: 'large' | 'default' | 'small';
    };
    //提交按钮配置
    submitBtn?: {
        //是否显示提交按钮
        show?: boolean;
        //按钮的文字
        innerText?: string;
    };
    //重置按钮配置
    resetBtn?: {
        //是否显示重置按钮
        show?: boolean;
        //按钮的文字
        innerText?: string;
    };
    //表单的提交事件
    onSubmit: (formData: Object, api: Api) => void;
    //表单的修改事件
    onChange: (field: string, value: any, opt: {
        rule: Rule;
        api: Api;
        setFlag: boolean;
    }) => void;
    //表单挂载前的回调
    onCreated: (api: Api) => void;
    //表单挂载后的回调
    onMounted: (api: Api) => void;
    //表单规则重载后的回调
    onMounted: (api: Api) => void;
    //请求发送前的回调函数
    beforeFetch: (config: Object, form: {
        api: Api;
        rule: Rule;
    }) => void | Promise<any>;
}

更多详情请查看完整文档：全局配置

修改设计表单的默认尺寸

在这个示例中，我们将通过 formOptions 配置表单的默认尺寸为 default。

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        formOptions: {
            form: {
                size: 'default',// 设置默认尺寸
            }
        }
    }
</script>

隐藏默认的提交按钮

有时您可能不需要显示表单的提交按钮。通过 submitBtn.show 配置项，可以隐藏默认的提交按钮。

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        formOptions: {
            submitBtn: {
                show: false // 隐藏提交按钮
            }
        }
    }
</script>

自定义表单提交逻辑

可以通过 onSubmit 配置项来自定义表单提交时的处理逻辑。

<template>
  <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
const config = {
    formOptions: {
        onSubmit: (formData) => {
            console.log('表单提交数据:', formData); // 自定义提交处理逻辑
        }
    }
};
</script>