vue中通过后台返回的只动态生成表单及提交

在crm系统中,页面中表单内容和表单提交的内容都是不固定的,特别是表单内容不确定;是根据后台的需要配置出来;前台根据接口返回;进行渲染,处理后进行提交,这样在vue中就会出现问题;因为vue中的数据是先渲染后使用;所有的数据必须先生命出来,所以这样就造成了这个问题;

解决方法:

  1.在请求接口;渲染后台需要提交的表单字段的时候;先对所有的需要渲染和提交的表单字段进行遍历,然后存储到data中一个对象中,我写的对象是subParams,这样就可以把所有需要提交的字段提交到subparams中了;

or(var ke in content[key]){
                        if(ke==‘办理情况‘){
                            this.subContent=content[key][ke];
                            for(var i=0;i<this.subContent.length;i++)
                            {
                                if(this.subContent[i].type=="2")
                                {
                                    var arr = this.subContent[i].value.split(‘,‘);
                                    var arr1 = [];
                                    var arr2 = [];
                                    var j=0;
                                    for(var key1 in arr)
                                    {
                                        if(arr[key1]!="")
                                        {
                                            arr1[j]=arr[key1];
                                            arr2[j] = arr[key1];
                                            j++;
                                        }
                                    }
                                    this.ordList[this.subContent[i].fd_name]=new Array(arr1);
                                    if(arr1.length<=1)
                                    {
                                        this.ordvalue[this.subContent[i].fd_name] = new Array(arr1[0]);
                                    }

                                }
                                else if(this.subContent[i].type=="3")
                                {
                                    var arr = this.subContent[i].value.split(‘,‘);
                                    var arr1 = [];
                                    var arr2 = [];
                                    var j=0;
                                    for(var key1 in arr)
                                    {
                                        if(arr[key1]!="")
                                        {
                                            arr1[j]=arr[key1];
                                            arr2[j] = arr[key1];
                                            j++;
                                        }
                                    }
                                    this.ordList[this.subContent[i].fd_name]=new Array(arr1);
                                }
                                else
                                {
                                    this.subParms[this.subContent[i].fd_name]=this.subContent[i].value;
                                }

                            }

这样的话就可以绑定了;然后根据要求渲染,把对应的表单元素渲染成对应的下过,v-model动态绑定到subParms中的值上;最后提交的时候把subParms作为一个对象提交上去就行;

原文地址:https://www.cnblogs.com/mrxinxin/p/11527618.html

时间: 2024-11-05 21:46:22

vue中通过后台返回的只动态生成表单及提交的相关文章

vue动态生成表单组件vue-generate-form

项目地址 简介 Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数 要做这一个组件 其实并不难 看一下Vue官方示例 再找个UI组件库 差不多就能写出来 如果对项目有兴趣 可以fork或克隆项目 自行研究 有问题或BUG欢迎提issues 文档 在线DEMO 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图

Asp.net动态生成表单

control.ascx ? 1 2 3 4 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="control.ascx.cs" Inherits="WebApplication1.control" %>   <asp:Panel ID="Panel1" runat="server"><

MVC动态生成表单

1*书写方式 一.using语句可以不写结束标记,自动加上 服务端 客户端 默认提交当前控制器和操作方法 二.开始与结束代码都写 服务端 客户端

JQuery动态创建表单并提交

// 捕捉链接的点击事件 $('#btn').click(function(){ // 取得要提交的参数 var my_val = $.trim($('#ipt').val()); // 取得要提交页面的URL var action = $(this).attr('href'); // 创建Form var form = $('<form></form>'); // 设置属性 form.attr('action', action); form.attr('method', 'pos

Django框架开发中避免表单重复提交

Form表单做为web2.0时代的重要角色,也是我们与web网站进行数据交互的重要渠道,但是大家在web网站开发过程中,都会遇到一个问题,那就是如何避免表单重复提交,我们可不确定用户可在提交了一个表单后,是否有足够的耐心等待我们的程序加载完成,如果此时用户不耐烦的在前台重复刷新页面,那么就会造成数据重复提交.信息不准确,因此我们在程序设计时一定要规避这样的问题,接下来介绍一下在Django框架开发中如何避免此问题. 首先说明一下Http协议中两种非常常见的方法GET和POST. 1.GET方法往

后台防止表单重复提交

方案一:利用Session防止表单重复提交 具体的做法: 1.获取用户填写用户名和密码的页面时向后台发送一次请求,这时后台会生成唯一的随机标识号,专业术语称为Token(令牌). 2.将Token发送到客户端的Form表单中,在Form表单中使用隐藏域来存储这个Token,表单提交的时候连同这个Token一起提交到服务器端. 3.服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致,如果不一致,那就是重复提交了,此时服务器端就可以不处理重复提交的表单.如果相同则处理表单提交,

Vue.js 实战教程 V2.x(12)表单输入绑定

12表单输入绑定 12.1基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 多行文本 <spa

解决表单GET提交后台数据乱码问题

?在页面上提交数据到服务器有两种方式"GET"和"POST",当使用"GET"时,传输的数据是直接拼接在URL后面的.当数据中含有对HTML来说不安全的字符例如中文时,就会被编码,一般采用的是UTF-8编码.这时URL已经被转义成相对安全的字符串.此时再经过ios-8859-1的编码方式转换成二进制的形式跟随请求头一起发送到服务器端. ?到达服务器端时,服务器也对数据进行两次解码,服务器先把数据经过ios-8859-1解码,然后根据服务器默认的编

(三)HTML中的列表标签、框架集及表单标签

一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> 例子:<ul type="??"> // type的属性值可以为:disc---->实心黑色圆:circle---->空心圆:square---->实心正方形. <li>河南理工大学</li> <li>河南工业大学<