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

这个问题是这样子的：

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

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="城市" prop="cityId">
                    <el-select v-model="ruleForm.cityId" placeholder="请选择城市" class="autowidth">
                        <el-option v-for="city in cities" :key="city.id" :value="city.id" :label="city.name">{{city.name}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商全称" prop="supplierName">
                    <el-input v-model="ruleForm.supplierName" class="autowidth"></el-input>
                </el-form-item>
                <el-form-item label="服务品类" prop="categoryIds">
                    <el-select v-model="ruleForm.categoryIds" multiple placeholder="请选择服务品类" class="autowidth">
                        <el-option v-for="cate in cates" :key="cate.id" :value="cate.id" :label="cate.name">{{cate.name}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商负责人" prop="chargeName">
                    <el-input v-model="ruleForm.chargeName" class="autowidth"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="chargePhone">
                    <el-input v-model="ruleForm.chargePhone" class="autowidth"></el-input>
                </el-form-item>
                <el-form-item label="供应商状态" prop="status">
                    <el-select v-model="ruleForm.status" class="autowidth">
                        <el-option label="储备" :value= "1">储备</el-option>
                        <el-option label="签约" :value="2">签约</el-option>
                        <el-option label="到期未续约" :value="3">到期未续约</el-option>
                        <el-option label="黑名单" :value="4">黑名单</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否有接单" prop="isUsed">
                    <el-radio-group v-model="ruleForm.isUsed" class="autowidth">
                        <el-radio :label="1" :key="1" :value="1">是</el-radio>
                        <el-radio :label="2" :key="2" :value="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="供应商主账号" prop="userAccount">
                    <el-input v-model="ruleForm.userAccount" class="autowidth"></el-input>
                </el-form-item>
                <el-button type="primary"  class="btn btnsubmit" @click="addSupplier">保存</el-button>
                <el-button type="primary" class="btn">保存录入下一条</el-button>
            </el-form>

这个表单的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); //字符串转数组