使用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、还可以自动生成代码，直接粘贴到代码中，提高开发效率

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