vue 动态表单开发方法案例详解


Posted in Javascript onDecember 02, 2019

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

概要

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

vue 动态表单开发方法案例详解

表单渲染过程。

实现步骤

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

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

vue 动态表单开发方法案例详解

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

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

我们每个组件都定义了:

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

2.手机端模板代码

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

<script>// 表单公式计算
var formulas_2400000001371061={};
// 表单日期计算
var dateCalcs_2400000001371061={};
//实体扩展JSON
var extJson_2400000001371061={};
//验证规则
var validRule_2400000001371061={"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 class="div-form">
  <div class="caption">
    simpleform
  </div>
  <div class="form-container">
    <div class="form">
      <div class="form-title">
          name
      </div>
      <div class="form-input">
        <rx-input v-model="data.name" permissionkey="name" vtype="length:50" :readonly="readonly" :permission="permission.main"></rx-input>
      </div>
    </div>
    <div class="form">
      <div class="form-title">
          age
      </div>
      <div class="form-input">
        <rx-input v-model="data.age" permissionkey="age" vtype="length:50" :readonly="readonly" :permission="permission.main"></rx-input>
      </div>
    </div>
    <div class="form">
      <div class="form-title">
          mobile
      </div>
      <div class="form-input">
        <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_2400000001371061={};\r\n// 表单日期计算\r\nvar dateCalcs_2400000001371061={};\r\n//实体扩展JSON\r\nvar extJson_2400000001371061={};\r\n//验证规则\r\nvar validRule_2400000001371061={\"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 class=\"div-form\">\r\n\t<div class=\"caption\">simpleform</div>\r\n\t<div class=\"form-container\">\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tname\t\t\t\t</div>\r\n\t\t\t\t<div class=\"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 class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tage\t\t\t\t</div>\r\n\t\t\t\t<div class=\"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 class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tmobile\t\t\t\t</div>\r\n\t\t\t\t<div class=\"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": "2400000001371078",
    "boDefId": "2400000001371061",
    "timeStamp": "1523799818000",
    "params": {}
  }]

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

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

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

步骤:

1.将html放到容器中。

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

vue 动态表单开发方法案例详解

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

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vue 开发之路由配置方法详解
Dec 02 #Javascript
vue 开发企业微信整合案例分析
Dec 02 #Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 #Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 #Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 #Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 #Javascript
angular异步验证防抖踩坑实录
Dec 01 #Javascript
You might like
php模块memcache和memcached区别分析
2011/06/14 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
VBScript版代码高亮
2006/06/26 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
大学生通用个人的自我评价
2014/02/10 职场文书
行政副总岗位职责
2014/02/23 职场文书
高中军训感言800字
2014/03/05 职场文书
股份合作协议书范本
2014/04/14 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
亮剑观后感500字
2015/06/05 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python