form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

文档 | GitHub | 示例 |  可视化表单设计器

支持 UI

• element-ui
• iview/view-design
• ant-design-vue

2.5.10主要更新了以下内容:

示例:

通过插槽生成一个表单组件

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options">
        <template slot="type-field-component" slot-scope="scope">
            <ElInput :value="''+scope.model.value" @input="(v)=>scope.model.callback(parseInt(v))" />
        </template>
    </form-create>
</div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit: (formData)=>{
                        alert(JSON.stringify(formData))
                    },
                },
                rule:[
                    {
                        type:'fieldComponent',
                        field:'fieldComponent',
                        title:'自定义插槽',
                        value:100
                    }
                ]
            }
        }
    }
</script>

scope数据结构

interface scope {
    rule:Rule; //组件生成规则
    prop:VNodeData; //on: 事件, props: 配置
    children: Vnode[] //子级
    model: { //定义field后才有
        value: any; //表单组件 value
        callback: (value:any)=>void; //表单组件 value 更新
    };
};

安装

根据自己使用的 UI 安装对应的版本

element-ui 版本

npm i @form-create/element-ui

iview@2.x|3.x 版本

npm i @form-create/iview

iview/view-design@4.x 版本

npm i @form-create/iview4

ant-design-vue@1.5+ 版本

npm i @form-create/ant-design-vue

快速上手

本文以element-ui为例

1. 在 main.js 中写入以下内容：

import Vue from 'vue'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import formCreate from '@form-create/element-ui'

Vue.use(ELEMENT)
Vue.use(formCreate)

1. 生成表单

在线示例

<template>
  <div id="app1">
      <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
  </div>
</template>

export default {
    data() {
        return {
            //实例对象
            fApi: {},
            //表单数据
            value: {},
            //表单生成规则
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: '商品名称'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: '创建时间'
                }
            ],
            //组件参数配置
            option: {
                //表单提交事件
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}