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 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python之文字转图片方法
2018/05/10 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
《小儿垂钓》教学反思
2014/02/23 职场文书
财务会计专业求职信
2014/06/09 职场文书
2014年个人售房协议书
2014/10/30 职场文书
python 中的jieba分词库
2021/11/23 Python
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL