el-form中数组嵌套对象的验证

 

<el-form
          ref="addData"
          :model="addData"
          :rules="addDataRules"
          label-width="110px"
          class="add-form pt20 pb10"
        >
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item
                :label="$t('specialityParam.tagName')"
                prop="tagName"
              >
                <el-input
                  v-model.trim="addData.tagName"
                  maxlength="100"
                  size="small"
                  :show-word-limit="true"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col v-for="(item,idx) in addData.dataList" :key="idx" :span="24">
              <el-form-item
                :label="$t('specialityParam.paramName')":prop="'dataList['+idx+'].paramName'"
                :rules="addDataRules.dataRules.paramName"
              >
                <el-input
                  v-model.trim="item.paramName"
                  width="80%"
                  maxlength="100"
                  size="small"
                  :show-word-limit="true"
                  clearable
                />
                <el-button-group>
                  <el-button
                    icon="el-icon-plus" 
                    size="mini" 
                  />
                  <el-button
                    icon="el-icon-close" 
                    size="mini" 
                  />
                </el-button-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div style="text-align: center;">
                <el-button
                  type="primary"
                  size="mini"
                  class="button-operate"
                  @click="handleSubmit()"
                >
                  {{ $t('base.submit') }}
                </el-button>
                <el-button
                  size="mini"
                  class="button-operate"
                  @click="handleCancel"
                >
                  {{ $t('base.cancel') }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>

 

 

addData: {
        tagName: '',
        dataList: [{}]
      },
      addDataRules: {
        tagName: [
          { required: true, message: this.$t('specialityParam.tagName_not_null'), trigger: 'blur' }
        ],
        dataRules: {
          paramName: [
            { required: true, message: this.$t('specialityParam.tagName_not_null'), trigger: 'blur' }
          ]
        }
      }

 

:prop="'dataList['+idx+'].paramName'"