最近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件，form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
ElementUInpm i @form-create/element-ui
我的基本框架是用的element，如果是iview可以参考一下官方文档。
首先放一下制作完成的效果图：
这里面那个最后那个单位值是个坑，看了好多便才搞明白如何处理这个参数。
下边我们开始讲解如何使用，作者已经封装好组件，我们只需要vue.use就可以全局调用了。
CDN 引入
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' }, ],
这样就可以完美展示后台提供的数据了，这里我做了一个医疗项目维护的功能，可以很方便的来维护检查项目上一张图，仅供参考，后续会更新如何来录入数据，快速生成检查报告。