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

最近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件，form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

ElementUI
npm i @form-create/element-ui

我的基本框架是用的element，如果是iview可以参考一下官方文档。

首先放一下制作完成的效果图：

这里面那个最后那个单位值是个坑，看了好多便才搞明白如何处理这个参数。

下边我们开始讲解如何使用，作者已经封装好组件，我们只需要vue.use就可以全局调用了。

CDN 引入

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/theme-chalk/index.css" rel="stylesheet">
<!-- import ElementUI -->
<script defer src="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/index.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>

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' },
       ],

这样就可以完美展示后台提供的数据了，这里我做了一个医疗项目维护的功能，可以很方便的来维护检查项目上一张图，仅供参考，后续会更新如何来录入数据，快速生成检查报告。