买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：成都乾隆科技有限公司

摘要：本发明公开了一种WEB表单处理方法及表单引擎系统，包括以下步骤：S1.将表单编辑组件分为三个模块，分别是组件区、布局区、属性编辑区；S2.将每个可选择的表单项定义为一个对象，并将若干个对象放入一个数组中；使用draggable组件作为容器；S3.使用draggable组件作为容器，定义一个数组listArr，将此数组绑定到list属性上；S4.结合element‑ui对属性编辑表单项进行二次封装，并定义一个属性名与属性编辑区中表单组件的对应关系的对象；S5.将S2‑S4中的三个组件合并即可得到表单编辑组件，在表单编辑组件内部定义getJSON方法，此方法返回S2中listArr数据；S6.构建表单解析组件，在组件内部接收json数据，遍历此数据，并根据每一项组件名的属性值渲染相应的S3中二次封装组件到页面上。

主权项：1.一种WEB表单处理方法，其特征在于，包括以下步骤：S1.将表单编辑组件分为三个模块，分别是组件区、布局区、属性编辑区；S2.将每个可选择的表单项定义为一个对象，并将若干个对象放入一个数组中；使用draggable组件作为容器，将定义好的数组数据绑定到此组件的list属性上，在此组件的插槽中将组件名称、图标渲染在页面上，将group属性的name值需要和S3中布局区的draggable组件一致，并将group属性的pull值设置为clone；S3.使用draggable组件作为容器，定义一个数组listArr，将此数组绑定到list属性上，并监听add事件，在初次添加后将该组件置为选中状态，并将listArr中组件数据双向绑定到S3中的属性编辑区；点击布局区组件将该组件置为选中状态，并将listArr中对应的组件数据双向绑定到S4中的属性编辑区；结合element-ui对表单组件进行二次封装，根据组件数据中的组件名称找到对应的二次封装组件作为draggable组件的插槽数据；S4.结合element-ui对属性编辑表单项进行二次封装，并定义一个属性名与属性编辑区中表单组件的对应关系的对象，其中属性名为编辑区选中组件需要进行编辑的属性名，根据属性名与属性编辑表单项组件的对应关系将选中组件需要编辑的属性渲染到属性编辑区，通过v-model实现组件与S3中的listArr数据双向绑定，即修改表单值更改S3中的listArr数据；S5.将S2-S4中的三个组件合并即可得到表单编辑组件，在表单编辑组件内部定义getJSON方法，此方法返回S2中listArr数据；S6.构建表单解析组件，在组件内部接收json数据，遍历此数据，并根据每一项组件名的属性值渲染相应的S3中二次封装组件到页面上。

全文数据：

权利要求：

百度查询： 成都乾隆科技有限公司 一种WEB表单处理方法及表单引擎系统