一种基于Vue的表单开发方法和装置.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN113760251A(43)申请公布日2021.12.07(21)申请号202011242668.9(22)申请日2020.11.09(71)申请人北京沃东天骏信息技术有限公司地址100176北京市北京经济技术开发区科创十一街18号院2号楼4层A402室申请人北京京东世纪贸易有限公司(72)发明人付小波(74)专利代理机构中原信达知识产权代理有限责任公司11219代理人郝红玉冯培培(51)Int.Cl.G06F8/34(2018.01)G06F8/38(2018.01)G06F8/65(2018.01)权利要求书2页说明书9页附图5页(54)发明名称一种基于Vue的表单开发方法和装置(57)摘要本发明公开了一种基于Vue的表单开发方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：接收对表单容器组件中各表单项配置数据的输入；使用Vue中内置组件的动态渲染能力，循环遍历各表单项配置数据，以生成至少一个表单项；将各数据字段名称组装为键值对形式，传递给所述表单容器组件的v‑model容器属性数据通信接口，以通过v‑model建立至少一个表单项和表单容器组件之间的双向数据通信关系。该实施方式中表单容器组件基于开源框架vue提供的动态组件功能，对表单项中的配置数据做动态渲染，由传入表单容器的props(组件属性)构建具体的表单项。CN113760251ACN113760251A权利要求书1/2页1.一种基于Vue的表单开发方法，其特征在于，包括：接收对表单容器组件中各表单项配置数据的输入；其中，表单项配置数据至少包括数据字段名称；使用Vue中内置组件的动态渲染能力，循环遍历各表单项配置数据，以生成至少一个表单项；将各数据字段名称组装为键值对形式，传递给所述表单容器组件的v-model容器属性数据通信接口，以通过所述v-model建立所述至少一个表单项和所述表单容器组件之间的双向数据通信关系。2.根据权利要求1所述的方法，其特征在于，还包括：按照组件接口规范，为所述表单容器组件添加schema属性接口和v-model；通过所述schema属性接口，接收对各表单项配置数据的输入；通过所述v-model，建立所述至少一个表单项和所述表单容器组件之间的双向数据通信关系，以进行数据和视图的同步更新。3.根据权利要求2所述的方法，其特征在于，所述v-model包括formData变量；在所述接收对表单容器组件中各表单项配置数据的输入之前，还包括：通过所述schema属性接口遍历各表单项配置数据，以获取各表单项配置数据中的数组字段名称并组装为键值对形式，赋值给所述formData变量。4.根据权利要求1-3中任一项所述的方法，其特征在于，表单配置数据还包括一表单项的组件默认值、组件名、组件属性名和属性值。5.一种基于Vue的表单开发装置，其特征在于，包括：输入模块，用于接收对表单容器组件中各表单项配置数据的输入；其中，表单项配置数据至少包括数据字段名称；渲染模块，用于使用Vue中内置组件的动态渲染能力，循环遍历各表单项配置数据，以生成至少一个表单项；建立模块，用于将各数据字段名称组装为键值对形式，传递给所述表单容器组件的v-model容器属性数据通信接口，以通过所述v-model建立所述至少一个表单项和所述表单容器组件之间的双向数据通信关系。6.根据权利要求5所述的装置，其特征在于，还包括属性接口添加模块，用于：按照组件接口规范，为所述表单容器组件添加schema属性接口和v-model；通过所述schema属性接口，接收对各表单项配置数据的输入；通过所述v-model，建立所述至少一个表单项和所述表单容器组件之间的双向数据通信关系，以进行数据和视图的同步更新。7.根据权利要求6所述的装置，其特征在于，所述v-model包括formData变量；所述装置还包括赋值模块，用于：通过所述schema属性接口遍历各表单项配置数据，以获取各表单项配置数据中的数组字段名称并组装为键值对形式，赋值给所述formData变量。8.根据权利要求5-7中任一项所述的装置，其特征在于，表单配置数据还包括一表单项的组件默认值、组件名、组件属性名和属性值。9.一种电子设备，其特征在于，包括：2CN113760251A权利要求书2/2页一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4中任一所述的方法。10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-4中任一所述的方法。3CN113760251A说明书1/9页一种基于Vue的表单开发方法和装置技术领