微信小程序编程_vue 动态表单开发方法案例详解

摘要: vue 动态性表格开发设计方式实例详细说明 本文关键详细介绍了vue 动态性表格开发设计方式,融合实际实例方式详尽剖析了vue.js动态性表格有关基本原理、开发设计流程与完成方法...

vue 动态表单开发方法案例详解       这篇文章主要介绍了vue 动态表单开发方法,结合具体案例形式详细分析了vue.js动态表单相关原理、开发步骤与实现技巧,需要的朋友可以参考下

本文实例讲述了vue 动态表单开发方法。分享给大家供大家参考,具体如下:

概要

动态表单指的是我们的表单不是通过vue 组件一个个编写的,我们的表单是根据后端生成的vue模板,在前端通过vue构建出来的。主要的思路是,在后端生成vue的模板,前端通过ajax的方式加载后端的表单模板,权限数据和表单数据,在前端使用vue进行构建出来。

表单渲染过程。

实现步骤

1.在前端开发表单组件,比如用户组件,文本输入组件。

在平台中我们可以看到我们开发的组件。

组件的开发在第三篇有介绍。

我们定义的组件和后台配置的权限相关。

我们每个组件都定义了:

permission: 权限对象 permissionkey:权限对应的key

2.手机端模板代码

手机端模板是通过表单BO元数据生成的,我们可以在后端编辑手机端模板,我们现在看一下简单的手机表单VUE的模板。

 script // 表单公式计算
var formulas_1061={};
// 表单日期计算
var dateCalcs_1061={};
//实体扩展JSON
var extJson_1061={};
//验证规则
var validRule_1061={"main":{"age":{"vtype":"length:50"},"name":{"vtype":"length:50"},"mobile":{"vtype":"length:50"}}}; /script 
 yd-popup v-model="showUserDialog" position="center" width="100%" 
 rx-sysuser :single="singleUser" ref="sysUser" v-on:ok="selectUser" v-on:cancel="closeUserDialog()" /rx-sysuser 
 /yd-popup 
 yd-popup v-model="showGroupDialog" position="center" width="100%" 
 rx-sysgroup :single="singleGroup" ref="sysGroup" v-on:ok="selectGroup" v-on:cancel="closeGroupDialog()" /rx-sysgroup 
 /yd-popup 
 div 
 div 
 simpleform
 /div 
 div 
 div 
 div 
 name
 /div 
 div 
 rx-input v-model="data.name" permissionkey="name" vtype="length:50" :readonly="readonly" :permission="permission.main" /rx-input 
 /div 
 /div 
 div 
 div 
 /div 
 div 
 rx-input v-model="data.age" permissionkey="age" vtype="length:50" :readonly="readonly" :permission="permission.main" /rx-input 
 /div 
 /div 
 div 
 div 
 mobile
 /div 
 div 
 rx-input v-model="data.mobile" permissionkey="mobile" vtype="length:50" :readonly="readonly" :permission="permission.main" /rx-input 
 /div 
 /div 
 /div 
 /div 

这个表单中:

我们可以看到我们自定义的组件,包括数据,权限部分,验证规则部分。

3.后端提供的数据部分。

我们可以看下后端提供的数据:

 "result": true,
 "msg": "",
 "type": "",
 "formKey": "simpleform",
 "content": " script // 表单公式计算\r\nvar formulas_1061={};\r\n// 表单日期计算\r\nvar dateCalcs_1061={};\r\n//实体扩展JSON\r\nvar extJson_1061={};\r\n//验证规则\r\nvar validRule_1061={\"main\":{\"age\":{\"vtype\":\"length:50\"},\"name\":{\"vtype\":\"length:50\"},\"mobile\":{\"vtype\":\"length:50\"}}}; /script yd-popup v-model=\"showUserDialog\" position=\"center\" width=\"100%\" rx-sysuser :single=\"singleUser\" ref=\"sysUser\" v-on:ok=\"selectUser\" v-on:cancel=\"closeUserDialog()\" /rx-sysuser /yd-popup yd-popup v-model=\"showGroupDialog\" position=\"center\" width=\"100%\" rx-sysgroup :single=\"singleGroup\" ref=\"sysGroup\" v-on:ok=\"selectGroup\" v-on:cancel=\"closeGroupDialog()\" /rx-sysgroup /yd-popup div "div-form\" \r\n\t div "caption\" simpleform /div \r\n\t div "form-container\" \r\n\t\t\t div "form\" \r\n\t\t\t\t div "form-title\" \r\n\t\t\t\t\tname\t\t\t\t /div \r\n\t\t\t\t div "form-input\" \r\n\t\r\n\t\t\t\t rx-input v-model=\"data.name\" permissionkey=\"name_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\" /rx-input \r\n\t\t\t\t /div \r\n\t\t\t /div \r\n\t\t\t div "form\" \r\n\t\t\t\t div "form-title\" \r\n\t\t\t\t\tage\t\t\t\t /div \r\n\t\t\t\t div "form-input\" \r\n\t\r\n\t\t\t\t rx-input v-model=\"data.age\" permissionkey=\"age_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\" /rx-input \r\n\t\t\t\t /div \r\n\t\t\t /div \r\n\t\t\t div "form\" \r\n\t\t\t\t div "form-title\" \r\n\t\t\t\t\tmobile\t\t\t\t /div \r\n\t\t\t\t div "form-input\" \r\n\t\r\n\t\t\t\t rx-input v-model=\"data.mobile\" permissionkey=\"mobile_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\" /rx-input \r\n\t\t\t\t /div \r\n\t\t\t /div \r\n\t /div /div \r\n\t",
 "permission": "{\"main\":{\"age\":{\"require\":false,\"right\":\"w\"},\"name\":{\"require\":false,\"right\":\"w\"},\"mobile\":{\"require\":false,\"right\":\"w\"}}}",
 "jsonData": {
 "age": "",
 "name": "",
 "mobile": ""
 "description": "simpleform",
 "viewId": "1078",
 "boDefId": "1061",
 "timeStamp": "00",
 "params": {}

这里看到后端返回的数据主要包括:

content :表单内容 permission:表单权限 jsonData:表单数据

4.通过vue 将表单进行渲染

步骤:

1.将html放到容器中。

2.使用vue 将数据和模版渲染到容器中。

希望本文所述对大家vue.js程序设计有所帮助。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:创建网站