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