VUE el-form 当表单数据多层嵌套，校验不生效或校验一直显示不成功的提示。

el-form 官方的表单数据是这样的,只有浅浅的一层。

   form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }

首先我的表单数据是这样的,也就是多了一层orderProductList这个数组。那要怎么校验这个多出来的一层的数据呢？

    const  ludanform = {
        id: row.id,
        askFor: row.askFor,
        pdfUrl: row.pdfUrl,
        requiredContent: row.requiredContent,
        trackingNumber: row.trackingNumber,
        postingNumber: row.postingNumber,
        totalCount: row.totalCount,
        orderProductList:  [
            {
                "name": "",
                "sku": "",
                "productImages": 
                "productCount": "",
                "contentInspection": null,
                "courierNumber": null,
                "productSource": null
            }
        ],
      }

我的方法很简单粗暴 ，rules 这里对应的表单数据结构，写出对应的校验数据结构。可以看出表单数据结构是多了一层 orderProductList数组，那么对应的rules也多了这个数组orderProductList

  const rules= {
        requiredContent: [
          {required: true, message: "必选不可为空", trigger: "blur"},
        ],
        trackingNumber: [
          {required: true, message: "条形码不可为空", trigger: "blur"},
        ],
        askFor: [{required: true, message: "要求不可为空", trigger: "blur"}],
        pdfUrl: [{required: true, message: "面单不可为空", trigger: "blur"}],

        orderProductList: [
          {
            productCount: [
              {required: true, message: "数量不能为空", trigger: "blur"},
            ],
            productSource: [
              {required: true, message: "商品来源不能为空", trigger: "blur"},
            ],
            courierNumber: [
              {required: true, message: "快递单号不能为空", trigger: "blur"},
            ],
          },
        ],
      };

具体代码如下

               <el-form-item
                     prop="orderProductList[0].productSource"
                      label="商品来源"
                    >
                      <el-select
                        v-model="ludanform.orderProductList[0].productSource"
                        placeholder="请选择商品来源"
                        style="width: 200px"
                      >
                        <el-option
                          v-for="item in options.a"
                          :key="item.value"
                          :label="item.dictLabel"
                          :value="item.dictValue"
                        />
                      </el-select>
                    </el-form-item>