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

介绍

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

文档 | github

安装

CDN 引入

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

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<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>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script>
<!-- import form-create -->
<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种常用表单组件

生成

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

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

数组组件/组件嵌套

可以通过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
                },
            ]
        }
    ]
}