element 表单嵌套验证

需求如下：el-form-item下嵌套多个el-form-item，并且能进行表单验证

表单内部项绑定校验主要靠prop和rules，porp指明地址，rules声明规则

 起先的思路是el-form-item =》el-form =》el-form-item循环，但是这样提交前要做两次校验。但是实际上只要按照一层一层往下写就行了，即直接el-form-item =》el-form-item循环

// 这边抽成了子组件
<template>
  <el-form-item
    label="格式"
    v-bind="formConfig.formItemAttr"
    class="sing_format"
  >
    <el-form-item
      v-for="(item, index) in formConfig.children"
      :key="index"
      :label="item.label"
      :prop="item.value" // first/two/three/four
      :rules="rules[formConfig.value][item.value]" //format.first...
      class="sing_format_item"
    >
      <el-select
        v-model="form[formConfig.value][item.value]"
        v-bind="formConfig.selectAttr"
        :disabled="
          disabled ||
            (formConfig.selectAttr && formConfig.selectAttr.disabled) ||
            false
        "
        clearable
        @visible-change="openSelect"
        @change="changeSelect"
      >
        <el-option
          v-for="item in dictionaries[formConfig.dictionarieType]"
          :key="item.dictionaryValue"
          :value="item.dictionaryValue"
          :label="item.dictionaryName"
          :disabled="item.disabled"
        >
          <span style="float: left">{{ item.dictionaryName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            item.dictionaryLable
          }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <span
      v-if="formConfig.selectAttr.afterSpan"
      style="font-size:14px;color:red"
      >{{ formConfig.selectAttr.afterSpan }}</span
    >
  </el-form-item>
</template>

// 父组件
data() {
  return {
    formData: {
        first: '',
        two: '',
        three: '',
        four: '',
        format: {}
    },
    rules: {
        format: {
          first: {
            required: true,
            message: '请选择第一位',
            trigger: 'change'
          },
          two: {
            required: true,
            message: '请选择第二位',
            trigger: 'change'
          },
          three: {
            required: true,
            message: '请选择第三位',
            trigger: 'change'
          },
          four: {
            required: true,
            message: '请选择第四位',
            trigger: 'change'
          }
        }
     }
  }
}

 //监听format并给first,two,three,four赋值，实现实时验证填写

watch: {
'formData.format': {
      handler(val) {
        this.formData.first = val.first
        this.formData.two = val.two
        this.formData.three = val.three
        this.formData.four = val.four
      },
      deep: true // 可以深度检测到 obj 对象的属性值的变化
    }
}

总结

表单顶层绑定了model和rules的，表单项添加了prop且prop能在顶层rules里面找到就会按照这个来校验，表单项添加了仅针对这一项的rules则会按照这个rules来校验

props只要指定表单项数据到表单model的相对位置就彳亍了

参考地址：elementui 嵌套表单验证_vue elementUI 表单校验（多层嵌套）//终极版_数字游民Jarod的博客-CSDN博客