vue的数组校验和多级嵌套下的校验

多级下的校验

prop要和model保持一致不然填数据后无法检测到校验不会消失

<el-form-item prop="sub.orgName" label="机构名称" :rules="subcFormRules.orgName">
  <el-input v-model="subcForm.sub.orgName" />
</el-form-item>

实现效果

实现代码

<el-row>
  <el-form-item v-for="(method, index) in form.testMethod" :key="method.key" :label="(index === 0 ) ? '测试方法' : null" prop="testMethod">
    <el-col :span="6">
      <el-form-item :prop="'testMethod.' + index + '.stdNum'" :rules="rules.stdNum">
        <el-input v-model="method.stdNum" placeholder="标准编号" @blur="numChange(index,method.stdNum)"/>
      </el-form-item>
    </el-col>
    <el-col :span="3">
      <el-form-item :prop="'testMethod.' + index + '.stdProvision'" :rules="rules.stdProvision">
        <el-autocomplete v-model="method.stdProvision" :trigger-on-focus="false" clearable placeholder="标准条款" style="width: 100%" :fetch-suggestions="provisionQuerySearchAsync" />
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item :prop="'testMethod.' + index + '.stdChName'" :rules="rules.stdChName">
        <el-input v-model="method.stdChName" disabled placeholder="标准中文名称" />
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-button type="primary" plain icon="el-icon-plus" style="margin-left: 10%" @click="addMethod()" />
      <el-button v-if="form.testMethod.length > 1" type="danger" plain icon="el-icon-minus" @click="removeMethod(index)" />
    </el-col>
  </el-form-item>
</el-row>
<el-form-item label="岗位分配" prop="postInfo">
  <el-table :data="form.postInfo" :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }">
    <el-table-column prop="status" label="分配状态" align="center" width="100">
      <template slot-scope="scope">
        <el-form-item :prop="'postInfo.' + scope.$index + '.status'">
          <el-switch v-model="scope.row.status" active-color active-value="0" inactive-value="1"/>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="laboratory" label="检测场所" align="center" width="auto">
      <template slot-scope="scope">
        <el-form-item :prop="'postInfo.' + scope.$index + '.laboratoryId'" :rules="rules.laboratoryId">
          <el-select v-model="scope.row.laboratoryId" filterable placeholder="检测场所" clearable style="width: 100%;">
            <el-option
              v-for="item in labList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="splClassId" label="样品分类" align="center" width="auto">
      <template slot-scope="scope">
        <el-form-item :prop="'postInfo.' + scope.$index + '.splClassId'">
          <el-cascader
            v-model="scope.row.splClassId"
            :options="splList"
            clearable
            filterable
            placeholder="样品分类"
            :show-all-levels="false"
            :props="{
              expandTrigger: 'hover',
              label: 'classification',
              value: 'id',
              checkStrictly: true,
              emitPath: false,
            }"
            style="width: 100%"
          />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="testDeptId" label="检验部门" align="center" width="auto">
      <template slot-scope="scope">
        <el-form-item :prop="'postInfo.' + scope.$index + '.testDeptId'" :rules="rules.testDeptId">
          <el-select v-model="scope.row.testDeptId" filterable placeholder="检验部门" clearable>
            <el-option
              v-for="item in deptList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="postId" label="岗位" align="center" width="auto">
      <template slot-scope="scope">
        <el-form-item :prop="'postInfo.' + scope.$index + '.postId'" :rules="rules.postId">
        <el-select v-model="scope.row.postId" filterable placeholder="岗位" clearable>
          <el-option
            v-for="item in postList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column align="center" width="100">
      <template slot="header" slot-scope="{}">
        <el-button type="text" size="small" @click="addLine()">添加</el-button>
      </template>
      <template slot-scope="scope">
        <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form-item>

export default {
  data() {
    return {
      // 表单校验
      rules: {
        testMethod: [
          { type: 'array', required: true }
        ],
        stdNum: [
          { required: true, message: '标准编号不可为空', trigger: 'blur' },
          { max: 100, message: '限制长度100字符', trigger: 'blur' }
        ],
        stdProvision: [
          { max: 100, message: '限制长度100字符', trigger: 'blur' }
        ],
        stdChName: [
          { max: 100, message: '限制长度100字符', trigger: 'blur' }
        ],
        postInfo: [
          { type: 'array', required: true }
        ],
        laboratoryId: [
          { required: true, message: '不可为空', trigger: 'change' }
        ],
        testDeptId: [
          { required: true, message: '不可为空', trigger: 'change' }
        ],
        postId: [
          { required: true, message: '不可为空', trigger: 'change' }
        ]
      }
    }
	}
}