使用Form Generator解决前端vue+elementUI动态表单功能

使用场景：

1、在添加数据时候，页面上有固定的一部分表单，而另一部分表单相当于扩展属性，想做成动态生成，产品经理可以自己通过配置，页面就有了扩展属性的表单；
2、前端开发也可以直接粘贴代码，提高开发效率；

关于Form Generator描述

网站网址：https://mrhj.gitee.io/form-generator/#/
GitHub：https://gitee.com/mrhj/form-generator
网站描述：基于vue 的element UI 表单设计及代码生成器，可视化设计表单，一键生成原生的vue单页表单代码；
vscode插件：form-generator-plugin

具体实现

1、打开网页可自行体验一下，下面是我截图，最终为了获取json存起来；

2、前台页面如何使用

1）安装 npm install form-gen-parser

2）在页面中引入 import Parser from ‘form-gen-parser’

import Parser from 'form-gen-parser'

为了方便我们自己测试，就先在前台自己写个变量存起来

{
  "fields": [{
    "__config__": {
      "label": "区域",
      "showLabel": true,
      "labelWidth": null,
      "tag": "el-select",
      "tagIcon": "select",
      "layout": "colFormItem",
      "span": 23,
      "required": true,
      "regList": [],
      "changeTag": true,
      "document": "https://element.eleme.cn/#/zh-CN/component/select",
      "formId": 101,
      "renderKey": "1011599097106238"
    },
    "__slot__": {
      "options": [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }]
    },
    "placeholder": "请选择区域",
    "style": {
      "width": "100%"
    },
    "clearable": true,
    "disabled": false,
    "filterable": false,
    "multiple": false,
    "__vModel__": "areaName"
  }],
  "formRef": "checkForm",
  "formModel": "checkForm",
  "size": "small",
  "labelPosition": "right",
  "labelWidth": 100,
  "formRules": "checkFormRules",
  "gutter": 15,
  "disabled": false,
  "span": 23,
  "formBtns": true
}

submitForm(data) {
 	console.log('sumbitForm1提交数据：', data);
},

如果不选按钮，比如这个动态表单 本身就用在弹框中，动态属性和基本属性需要同时提交给后台，不需要动态表单自己生成的按钮；

这是可以使用 this.$refs.parser.submitForm(); 来触发事件获取数据

this.$refs.parser.submitForm();

小提示

3、还可以自动生成代码，直接粘贴到代码中，提高开发效率

点击页面上的运行会自定生成代码，并且可以预览效果
代码也是可以直接粘贴到页面中就可用哦，体验下试试看