Vue 表单生成器form-create的基本使用

现在有个项目需求，表单通过请求后端接口返回的数据，动态生成对应的DOM(表单类型)，以及表单的初始数据渲染，和修改表单后的数据提交。根据以上项目需求，所以这次就选择用form-create(表单生成器)来做。

form-create

form-create是一个具有动态渲染、数据收集、校验和提交功能的表单生成器，支持生成vue组件。

官方参考文档: http://www.form-create.com

CRMEB系统：https://v5.crmeb.net/admin/login

账号：demo 密码：crmeb.com

github源代码:https://gitee.com/ZhongBangKeJi/CRMEB#https://gitee.com/ZhongBangKeJi/crmeb_java

根据自己项目UI组件库来选下载方式。

我们项目用到的是ElementUi组件库，所以安装：

npm i @form-create/element-ui

如其他组件库，请参考下图安装：

在main.js文件中配置elementui和form-create

实例（代码在下方）：

完整代码如下”

<template>
 
  <div>
 
    <el-button type="primary" @click="openFormDialog">新增</el-button>
 
    <el-button type="primary" @click="editFormDialog">修改</el-button>
 
 
 
    <!-- 表单弹窗 -->
 
    <el-dialog :visible.sync="dialogVisible" title="动态表单" width="800px">
 
      <form-create :option="option" v-model="fApi" :rule="rules" ></form-create>
 
      <!-- <el-button @click="onSubmit">提交</el-button> -->
 
    </el-dialog>
 
  </div>
 
</template>
 
 
 
  <script>
 
import {addComplaint} from "@/api/guestAppeal/guest";
export default {
  data() {
    return {
      fApi:{},
      rules: [
        {
          type: 'input',
          field: 'userName',
          title: '用户名称',
          value: '',
          props: {
            placeholder: '请输入用户名称',
            clearable: true
          },
          validate: [
            {
              trigger: 'blur',
              required: true,//是否必填
              message: '用户名称不能为空'
            }
          ]
        },
        {
          type: 'input',
          field: 'summary',
          title: '个人简介',
          value: '',
          props: {
            type:'textarea',
            placeholder: '请输入个人简介',
            rows:3
          },
          validate: [
            {
              trigger: 'blur',
              required: true,//是否必填
              message: '用户名称不能为空'
            }
          ]
        },
 
        {
          type: 'radio',
          field: 'sex',
          title: '性别',
          value: 0,
          options: [
            {
              label: '先生', value: 1,
            },
            {
              label: '女士', value: 2,
 },
 ]
 },
{
 type: 'checkbox',
field: 'hobby',
title: '爱好',
value: [1, 3],
 
          options: [
{
 label: '吃喝', 
value: 1,
},
{
label: '旅游', 
value: 2,
},
{
label: '运动', value: 3,
},
{
label: '学习', value: 4,
 
            },
          ]
        },
        {
          type: 'select',
          field: 'address',
          title: '去哪',
          value: 6,
          col:{
            md:{
              span:10
            }
          },
          options: [
            {
              label: '哈尔滨', value: 1,
 
            },
            {
              label: '云南', value: 2,
            },
            {
              label: '三亚', value: 3,
},
 {label: '泰国', value: 4, },
 
          ]
        },
 
        {
          type:'DatePicker',
          field:'dateTime',
          title:'起止日期',
          value:['',''],
          props:{
            type:'daterange',
            format:'yyyy-MM-dd',
            placeholder:'请选择起止日期'
          }
 
        },
 
        {
          type: 'upload',
          field: 'imgFile',
          title: '图片上传',
          value: [
'https://img0.baidu.com/it/u=3232582821,3516640051&fm=253&fmt=auto&app=138&f=JPEG?w=625&h=500',
 
            'https://img2.baidu.com/it/u=1814561676,2470063876&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
 
          ],
 
          col:{
            md:{
              span:18
            }
          },
 
          props:{
            type:'select',
            uploadType:'image',
            name:'userPhoto',
            multiple:true,
            accept:'image/*',
            format:['jpg','png','jpeg'],
            action:'http"//www.baidu.com',
            onSuccess:function(res){
              return ''
            }
          }
 
        }
 
      ],
      option: {
        resetBtn: true,
        submitBtn: true,
        form: {
 
        },
        onSubmit: formData => {
          // alert(JSON.stringify(formData))
          addComplaint(JSON.stringify(formData)).then(res=>{
 
})
        }
      },
      title: '',
      dialogVisible: false, // 弹窗是否可见
      formFields: {},       // 后端返回的字段定义
      formData: {}          // 表单数据
    };
 
  },
 
  methods: {
 
    editFormDialog(row){
        this.dialogVisible = true
    },
 
    openFormDialog() {
      // 打开弹窗
      this.dialogVisible = true;
    },
 
    // onSubmit(formData) {
 
    //   // console.log(formData);
 
    //   this.fApi.submit((formData,fApi)=>{
 
    //     console.log(JSON.stringify(formData));
 
    //     addComplaint(JSON.stringify(formData)).then(res=>{
 
    //     })
 
    //   })
 
    // },
 
 
 
  }
 
};
 
  </script>

效果图：

完成啦。