element-ui 表单验证时规则对象二级验证失效 - 记录贴(已解决)

解决方法
页面DOM对应元素中prop修改为 prop=”address.detlAddrMemo”;
rules中的键值改为”address.detlAddrMemo”

---

失败的案例

• 验证规则

rules: {
        detlAddrMemo: {
          required: true,
          message: "请输入门店编号",
          trigger: "blur"
        },

   }

• 表单

<el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" v-show="step.active==0">
        <div class="form-group">
          <div class="form-group-left">
            <el-form-item label="门店编号" prop="detlAddrMemo">
              <el-input v-model="form.address.detlAddrMemo" :disabled="!isEdit" placeholder="门店编号"></el-input>
            </el-form-item>
          </div>
     </div>
<el-form>

• 表单数据

form: {
        address: {
          id: "1",
          provId: "",
          cityId: "",
          detlAddrDesc: "",
          detlAddrMemo: "",
          cityCode: "",
          telephoneNum: "",
          geoMapLgttude: "",
          geoMapLattdue: ""
        },
 }

应为验证规则比对不上,所以会导致验证失败

---

修改之后

rules: {
        'address.detlAddrMemo': {
          required: true,
          message: "请输入门店编号",
          trigger: "blur"
        },

   }

• 表单

<el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" v-show="step.active==0">
        <div class="form-group">
          <div class="form-group-left">
            <el-form-item label="门店编号" prop="address.detlAddrMemo">
              <el-input v-model="form.address.detlAddrMemo" :disabled="!isEdit" placeholder="门店编号"></el-input>
            </el-form-item>
          </div>
     </div>
<el-form>

• 表单数据

form: {
        address: {
          id: "1",
          provId: "",
          cityId: "",
          detlAddrDesc: "",
          detlAddrMemo: "",
          cityCode: "",
          telephoneNum: "",
          geoMapLgttude: "",
          geoMapLattdue: ""
        },
 }