ant-design-vue表单生成组件form-create快速上手

介绍

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

文档 | github

安装

CDN 引入

目前可以通过 unpkg.com/@form-create/ant-design-vue 获取到最新版本的资源，在页面上引入 js 即可开始使用。

<script src="//vuejs.org/js/vue.min.js">script>

<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js">script>

<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js">script>

<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js">script>

NPM

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

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

引入

import formCreate from '@form-create/ant-design-vue'

支持

• ant-design-vue ^1.5.3
• elment-ui
• iview

功能

- 持支持3种 UI 框架
- 支持自定义表单组件
- 可生成任何Vue组件
- 自带数据验证
- 组件插槽设置
- 通过 JSON 生成表单
- 通过 Maker 生成表单
- 强大的API，可快速操作表单
- 双向数据绑定
- 事件扩展
- 事件注入
- 局部更新
- 数据验证
- 栅格布局
- 内置组件17种常用表单组件

生成

数组组件/组件嵌套

可以通过group组件实现组件数组,嵌套对象功能

{
    type:"group",
    title:"标签",
    field:" label",
    value:[],
    props:{
        min:1,
        max:5,
        rule:{
            type:'input',
            field:'input',
            props:{disabled:false},
            validate:[{required:true}]
        }

    },
    validate:[
        {required:true, type: 'array', min: 1, message: '最少添加1个标签'}
    ]
}

Control 配置项

可以通过control配置项实现通过组件的值控制其他组件是否显示

当用户选中包邮选项后会自动显示number组件

{
    type:"radio",
    title:"是否包邮",
    field:" is_postage",
    value:0,
    options: [
        {value: 0, label: '不包邮', disabled: false},
        {value: 1, label: '包邮', disabled: false},
    ],
    control:[
        {
            value:1,
            rule:[
                {
                    type: 'number',
                    field: 'postage_money',
                    title: '满额包邮',
                    value: 0
                },
            ]
        }
    ]
}