在最近开发的功能的过程中，遇到一个很复杂的表单；外层一个大表单；里面有一项是动态添加的，而且内嵌一个表单。每一项还有校验规则；如下图

记录一下调试结果。 无论多少层form, 注意几个事项；

form的model/ref;  form_item的prop这个关系到，校验作用具体那个框框 

数据还一个json，组件只是渲染UI，逐步分解就好了。

直接上完整代码，如下：

<!--定义巡检项-->
<template>
  <div class="drawer__content">
    <el-form :model="formUp" ref="formUp">
      <el-form-item
        label="巡检项名称"
        prop="name"
        :label-width="formLabelWidth"
        :rules="[
          { required: true, message: '请输入巡检项名称', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="formUp.name"
          autocomplete="off"
          maxlength="64"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="巡检项描述"
        prop="description"
        :label-width="formLabelWidth"
        :rules="[
          { required: false, message: '请输入巡检项描述', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="formUp.description"
          type="textarea"
          autocomplete="off"
          maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="巡检项登录用户"
        prop="itemLevels"
        :label-width="formLabelWidth"
        :rules="[
          {
            required: true,
            message: '请选择巡检项登录用户',
            trigger: 'change',
          },
        ]"
      >
        <el-checkbox-group v-model="formUp.itemLevels">
          <el-checkbox
            label="root"
            name="type"
            :disabled="formUp.itemLevels.includes('oracle')"
          ></el-checkbox>
          <el-checkbox
            label="administrator"
            name="type"
            class="borderRight"
            :disabled="formUp.itemLevels.includes('oracle')"
          ></el-checkbox>
          <el-checkbox
            label="oracle"
            name="type"
            :disabled="
              formUp.itemLevels.includes('root') ||
              formUp.itemLevels.includes('administrator')
            "
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="巡检项分类"
        prop="itemCategoryId"
        :label-width="formLabelWidth"
        :rules="[
          { required: false, message: '请选择巡检项分类', trigger: 'change' },
        ]"
      >
        <el-cascader
          v-model="formUp.itemCategoryId"
          clearable
          :filterable="true"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children',
            emitPath: 'false',
            checkStrictly: true,
          }"
          :options="folderData"
          :show-all-levels="false"
        >
          <template slot-scope="{ node, data }">
            <span>{
  { data.name }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item
        label="资源分类"
        prop="resourceCateId"
        :label-width="formLabelWidth"
        :rules="[
          { required: true, message: '请选择资源分类', trigger: 'change' },
        ]"
      >
        <el-select
          v-model="formUp.resourceCateId"
          placeholder="请选择资源分类"
          @change="getTemplateArr"
          :disabled="setDialogType == 'edit'"
        >
          <el-option
            v-for="resourceItem in resourceArr"
            :key="resourceItem.id"
            :label="resourceItem.name"
            :value="resourceItem.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="结果判定"
        prop="resultCheck"
        :label-width="formLabelWidth"
      >
        <el-switch
          v-model="formUp.resultCheck"
          active-text&