elementUI rule验证无效 不起作用

因为项目中遇到复杂的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-select
                                            v-model="formInfo.baseInfo.orderType"
                                            placeholder="订单类型"
                                        >
                                            <el-option
                                                v-for="item in orderTypeData"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.code"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
    //js
            rules: {
               
                orderType: [
                    {
                        required: true,
                        message: "请选择",
                        trigger: "change"
                    }
                ],
            }

prop和rules里的校验名称是一样的 不管如何选值 就是一直校验不通过 报错

重点来了，解决方法

 //页面                                  
                                   <el-form-item label="订单类型：" prop="baseInfo.orderType">
                                       <el-select
                                            v-model="formInfo.baseInfo.orderType"
                                            placeholder="订单类型"
                                        >
                                            <el-option
                                                v-for="item in orderTypeData"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.code"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
    //js
            rules: {
               
                [`baseInfo.orderType`]: [
                    {
                        required: true,
                        message: "请选择",
                        trigger: "change"
                    }
                ],
            }

prop="baseInfo.orderType"换成这个

rules 校验名称换成这个 [`baseInfo.orderType`]

原因是因为rules针对的是:model="formInfo" model绑定的那个数据 model.orderType 当然找不到 所有需要加上你套的数据格式这样就好了