校验问题引发的复制对象，对对象进行修改不改变vm中的对象。

这个问题是这样子的：

用element-ui的表单组件，组件中自带表单校验，每个字段可自行设置数据类型，和触发校验的时机,form是这样的：
model和vue 的data里的数据对应，rules就是校验规则，和data里的rules对应，每个表单项的prop属性是校验必需，和v-model里的字段对应

                
                    
                        {{city.name}}
                    
                
                
                    
                
                
                    
                        {{cate.name}}
                    
                
                
                    
                
                
                    
                
                
                    
                        储备
                        签约
                        到期未续约
                        黑名单
                    
                
                
                    
                        是
                        否
                    
                
                
                    
                
                保存
                保存录入下一条
            

这个表单的vm，上面说的可以自定义设置数据类型就是type，就是number，string，array等数据类型。trigger是触发校验的时机，输入框失焦或是selecte框change。

 export default {
        name: 'addSupplier',
        data() {
            return {
                ruleForm: {
                    cityId: null,
                    supplierName: '',
                    categoryIds: [],
                    chargeName: '',
                    chargePhone: '',
                    status: null,
                    isUsed: null,
                    userAccount: '',
                },
                supplierId:'',
                rules: {
                    cityId: [{type:'number', required:true,message:'请选择城市',trigger:'change'}],
                    supplierName: [{ required:true,message:'请输入供应商全称',trigger:"blur"}],
                    categoryIds: [{type:'array', required:true,message:'请选择服务品类',trigger:"change"}],
                    chargeName: [{ required:true,message:'请填写供应商负责人',trigger:"blur"}],
                    chargePhone: [{ required:true,message:'请输入手机号',trigger:"blur"}],
                    status: [{type:'number', required:true,message:'请选择供应商状态',trigger:"change"}],
                    isUsed: [{type:'number', required:true,message:'是否有接单',trigger:"change"}],
                    userAccount: [{ required:true,message:'请填写供应商主账号',trigger:"blur"}],
                },
                errorMsg:'',

尴尬的是：表单提交的时候会触发再一次校验，但是表单中有一项品类，多选，选的时候是array,提交时要把这个数组转成字符串，但后台要的是id用逗号分隔的字符串，那么这个表单的校验规则就不能符合，因为他还是在对比我是不是一个数组。

image.png

这次用到的办法就是，把这个要上传接口的ruleForm对象复制一个副本，把副本修改上传，也就是校验原本，提交副本。

这是一个简单的表单上传接口。看备注吧

addSupplier(){
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                        try {
                            if(this.supplierId){
                                //如果有id则证明是编辑
//                                this.ruleForm.id = this.supplierId;
//                                await srmService.updateSupplier(this.ruleForm);
//                                this.supplierId =  "";//编辑成功后将id清除
                            }else{
                                //否则为新增
                                let ruleForm2 = JSON.stringify(this.ruleForm);
//本来要提交的是ruleForm对象，先把它序列化为JSON存在变量ruleForm2里。
                                ruleForm2 = JSON.parse(ruleForm2);
//再把ruleForm2转换为对象，存起来，没必要新建变量，那就还用ruleForm2没问题。
//给副本对象的categoryIds修改成逗号分隔的字符串。
     ruleForm2.categoryIds =  this.ruleForm.categoryIds.join(',');
//表单提交ruleForm2.
                                const {data:{code,msg}} = await srmServices.addSupplier(ruleForm2);
                                this.code = code;
                                this.errorMsg = msg;
                            }
                        } catch (e) {
                            alert(e);
                        }
                    }
                    alert(this.errorMsg);

                });
            },

为啥做个副本还要转成字符串再转回对象？？？

是想这么写的对吧：let ruleForm2 = this.ruleForm;

对象的引用类型就是增加个指针。。。。根本做不到，改的还是ruleForm....所以才要序列化再反序列化。

**JSON.stringify(array); //数组转字符串
**JSON.parse(json); //字符串转数组