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

Posted 2020-11-13 mrxinxin

在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作为一个对象提交上去就行；