表单|vue结合form-create组件生成动态表单 |组件|动态|

最近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件， form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
ElementUInpm i @form-create/element-ui
我的基本框架是用的element ，如果是iview可以参考一下官方文档。
首先放一下制作完成的效果图：

本文插图

这里面那个最后那个单位值是个坑，看了好多便才搞明白如何处理这个参数。
下边我们开始讲解如何使用，作者已经封装好组件，我们只需要vue.use就可以全局调用了。
CDN 引入 &ltscript src="http://news.hoteastday.com//vuejs.org/js/vue.min.js"&gtscript&gt
&ltlink href="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/theme-chalk/index.css" rel="stylesheet"&gt&ltscript defer src="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/index.js"&gtscript&gt&ltscript src="http://news.hoteastday.com//unpkg.com/@form-create/element-ui/dist/form-create.min.js"&gtscript&gt NPM
安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i @form-create/element-ui
引入
import formCreate, {maker} from "@form-create/element-ui"
#兼容

element-ui ^2.8.2

Vue.use(formCreate)
在main.js设置好就可以使用了。
我采用的是json来处理格式化数据，官方给的数据格式是这样的

//JSON 规则const rule = [ {"type":"input","field":"goods_name","title":"商品名称","value":"mi"}, {"type":"inputNumber","field":"goods_price","title":"商品价格","value":12}]

我后端api接口采用的是tp6,这里便于直观展示，我直接dump一下内容，大概数据结构是这样的

本文插图

关键来了，这里跟官方标准文档不一样的地方在于，增加了两层children ，一开始没明白官方文档的说明，后来仔细看，插槽solt的解释，需要children包住内容才可以显示组件或者按钮名称，官方文档是这些的

 rule:[ { type:"el-button", children:["方式1"] }, { type:"el-button", children:[{ type:"i", class:"el-icon-check" }," 方式2"] }

我采用的是方式一，双层children ，在设置children插槽中另外增加一层children用于显示名称。
如果需要表单验证的话，只需要在api接口中根据文档规则来生成相应的json规则，前端使用axios获取一下就可以了，非常方便。
validate:[ { required: true, message: "请输入商品简介", trigger: "blur" }, ],
这样就可以完美展示后台提供的数据了，这里我做了一个医疗项目维护的功能，可以很方便的来维护检查项目上一张图，仅供参考，后续会更新如何来录入数据，快速生成检查报告。