因为项目中遇到复杂的form表单传输 具体最终提交格式如下
// 表单formInfo: {// 基础信息baseInfo:{platOrderNo: "",orderType: "",shopId: "1",tradeTimeStr: "",wareId: "",payType: "",},// 物流信息deliveryInfo:{deliveryWareId:"",deliveryTimeStr: "",expressCompanyId: "",expressNo: "",areaCode: "",receiverAddress: "",},//开票信息相关invoiceFlag: "",invoiceInfo:{invoiceType: "",takerPhone: "",takerEmail: ""}},发现所有表单验证不起作用了
以orderType为例
//页面 <el-form-item label="订单类型：" prop="orderType"><el-selectv-model="formInfo.baseInfo.orderType"placeholder="订单类型"><el-optionv-for="item in orderTypeData":key="item.id":label="item.name":value="item.code"></el-option></el-select></el-form-item>//jsrules: {orderType: [{required: true,message: "请选择",trigger: "change"}],}prop和rules里的校验名称是一样的 不管如何选值 就是一直校验不通过 报错
重点来了，解决方法
//页面 <el-form-item label="订单类型：" prop="baseInfo.orderType"><el-selectv-model="formInfo.baseInfo.orderType"placeholder="订单类型"><el-optionv-for="item in orderTypeData":key="item.id":label="item.name":value="item.code"></el-option></el-select></el-form-item>//jsrules: {[`baseInfo.orderType`]: [{required: true,message: "请选择",trigger: "change"}],}prop="baseInfo.orderType"换成这个
rules 校验名称换成这个 [`baseInfo.orderType`]
原因是因为rules针对的是:model="formInfo" model绑定的那个数据 model.orderType 当然找不到 所有需要加上你套的数据格式这样就好了