在线示例

以下是 from-create 的功能演示和参考案例

简单示例

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    },
                    resetBtn:true
                },
                rule:[
                    {
                        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},
                        ]
                    },
                ]
            }
            
        }
    }
</script>

使用教程

• 使用教程 (opens new window)

组件示例

• Input 输入框 (opens new window)
• AutoComplete 自动生成 (opens new window)
• Radio 单选框 (opens new window)
• Cascader 多级联动 (opens new window)
• Upload 上传 (opens new window)
• Select 下拉选择框 (opens new window)
• Checkbox 多选框 (opens new window)
• InputNumber 数字输入框 (opens new window)
• TimePicker 时间选择器 (opens new window)
• DatePicker 日期选择器 (opens new window)
• Switch 开关 (opens new window)
• ColorPicker 颜色选择框 (opens new window)
• Rate 评分 (opens new window)
• Slider 滑块 (opens new window)
• Tree 树形组件 (opens new window)
• Frame 框架 (opens new window)
• 数组组件/组件嵌套 (opens new window)
• control 配置项 (opens new window)

进阶组件

• 数组组件
• 对象组件
• 富文本组件

功能示例

• 使用 json 参数生成表单 (opens new window)
• 使用 maker 生成器生成表单 (opens new window)
• Validator 表单验证 (opens new window)
• Dynamic Add 动态添加组件 (opens new window)
• Bind 双向数据绑定 (opens new window)
• Generate 生成任意组件 (opens new window)
• Event 事件扩展 (opens new window)
• Col 栅格布局规则 (opens new window)

案例

• CRMEB客户管理+电商管理系统 (opens new window) (演示站 (opens new window) 账号：demo 密码：crmeb.com)