这个问题是这样子的：
用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); //字符串转数组
网友评论