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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
javascript中创建对象的几种方法总结
2013/11/01 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python生成九宫格图片
2018/11/19 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Django如何将URL映射到视图
2019/07/29 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
Python实现区域填充的示例代码
2021/02/03 Python
一份Java笔试题
2012/02/21 面试题
自我鉴定范文
2013/11/10 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
淘宝活动总结范文
2014/06/26 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis