vueform表单提交_vue动态生成form表单原理

2024年 9月 17日下午8:51 • 激活谷笔记

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

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

ElementUI npm i @form-create/element-ui

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

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

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

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

CDN 引入

<!-- import Vue.js --> <script src="https://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="https://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' }, ],

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

vueform表单提交_vue动态生成form表单原理

CDN 引入

NPM

#兼容

相关推荐