在线示例

以下是 FormCreate 的功能演示和参考案例，帮助开发者快速了解如何在实际项目中使用和扩展。

简单示例

以下是一个简单的表单示例，展示了如何使用 FormCreate 生成表单并处理提交事件。

使用教程

详细的使用教程可以帮助您更深入地了解 FormCreate 的功能和用法。

• 使用教程

业务场景示例

FormCreate 在各种业务场景中都能发挥重要作用，以下是几个常见的应用场景：

动态表单生成

假设您有一个需要根据用户选择动态生成的表单，可以使用 FormCreate 来实现：

表单联动效果

您可以轻松实现表单项之间的联动，例如根据一个下拉框的值动态显示或隐藏其他表单项。

动态组件加载

在复杂场景中，您可能需要根据业务逻辑动态加载不同的组件，FormCreate 提供了灵活的动态加载机制。

const dynamicComponent = () => import('./CustomComponent.vue');


const rule = ref([
    {
        component: dynamicComponent,
        field: 'custom_field',
        title: '自定义组件'
    }
]);

使用自定义组件

除了内置的组件外，您还可以将自定义 Vue 组件集成到 FormCreate 中，轻松实现复杂的业务需求。

import MyCustomComponent from './MyCustomComponent.vue';
import formCreate from '@form-create/element-ui';


formCreate.component('MyCustomComponent', MyCustomComponent);


const rule = ref([
    {
        type: 'MyCustomComponent',
        field: 'custom_field',
        title: '自定义组件'
    }
]);

加载初始数据

在一些场景中，您可能需要从 API 加载初始数据并填充到表单中。可以通过 mounted 钩子在表单加载后进行 API 请求，并将获取的数据绑定到表单中。

export default {
    data() {
        return {
            formData: {},
            rule: [
                { type: 'input', field: 'username', title: '用户名' },
                { type: 'input', field: 'email', title: '邮箱' }
            ],
            option: {
                onSubmit: (formData) => {
                    console.log('提交表单数据:', formData);
                }
            }
        };
    },
    mounted() {
        axios.get('/api/user')
            .then(response => {
                this.formData = response.data;
            });
    }
};

表单数据提交

FormCreate 提供了便捷的表单提交方法，您可以在表单提交时将数据发送到服务器。

const options = ref({
    submitBtn: true,
    resetBtn: true,
    onSubmit: function (formData) {
        axios.post('/api/submit', formData)
            .then(response => {
                console.log('提交成功:', response.data);
            })
            .catch(error => {
                console.error('提交失败:', error);
            });
    }
});

自定义验证规则

除了内置的验证规则外，FormCreate 允许您自定义验证逻辑，以满足复杂的业务需求。

const rule = ref([
    {
        type: 'input',
        field: 'username',
        title: '用户名',
        validate: [
            { required: true, message: '用户名不能为空' },
            {
                validator: async (rule, value) => {
                    const isExist = await axios.get(`/api/check-username?username=${value}`);
                    if (isExist.data) {
                        return Promise.reject('用户名已被注册');
                    } else {
                        return Promise.resolve();
                    }
                },
                trigger: 'blur'
            }
        ]
    },
    {
        type: 'input',
        field: 'password',
        title: '密码',
        validate: [
            { required: true, message: '密码不能为空' },
            {
                validator: (rule, value) => {
                    if (value.length < 6) {
                        return Promise.reject('密码长度不能少于6个字符');
                    } else {
                        return Promise.resolve();
                    }
                },
                trigger: 'blur'
            }
        ]
    }
]);

组件示例

• Input 输入框
• Password 密码输入框
• Textarea 多行输入框
• Radio 单选框
• Cascader 多级联动
• Upload 上传
• Select 下拉选择框
• Checkbox 多选框
• InputNumber 数字输入框
• TimePicker 时间选择器
• TimeRangePicker 时间区间选择器
• DatePicker 日期选择器
• DateRangePicker 日期区间选择器
• Switch 开关
• ColorPicker 颜色选择框
• Rate 评分
• Slider 滑块
• Tree 树形组件
• TreeSelect 树形下拉选择框
• Transfer 穿梭框

进阶组件

• Group 子表单
• SubForm 分组
• Layout 栅格布局