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

资料来源：网络整理时间：2023/2/14 0:55:31 共计：3617 浏览

使用场景：

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’

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

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

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

小提示

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

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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：mysql基本操作命令汇总--笔记 | ·下一条：抓取iframe内数据(C#)