表单嵌套表单，阻止必填校验传递

场景：点击选择机构号，弹出选择机构号弹窗

由于触发了机构号的必填校验，必填校验会传递给表单项内部的所有表单，所以选择机构号弹窗内的表单也会全部报红

解决方案：append-to-body="true"，将弹窗内容传送到body标签中，脱离原表单

原代码

AddForm.vue

        <el-form-item
          label="机构号"
          prop="assignOrgCodeList"
          v-if="form.scope === 0"
          style="width: 100%"
        >
          <SelectReleaseAgency
            v-model:valueList="form.assignOrgCodeList"
            :form="form"
            :row="row"
          ></SelectReleaseAgency>
        </el-form-item>

SelectReleaseAgency.vue

  <el-select
    v-model="props.valueList"
    placeholder="请选择"
    multiple
    @click="handleSelect"
  >
    <template #tag>
      <el-tag v-for="item in props.valueList" :key="item">{{ item }}</el-tag>
    </template>
  </el-select>
  <el-dialog
    v-model="dialogVisible"
    title="指定定档范围"
    width="60%"
    :before-close="handleClose"
  >
    <el-form :model="formInline">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="企业名称" style="width: 100%">
            <SelectAssociateEnterprise
              v-model:value="formInline.enterpriseId"
              :is-edit="true"
              :clearable="true"
            ></SelectAssociateEnterprise> </el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="机构号">
            <el-input
              v-model="formInline.orgCode"
              placeholder="请输入机构号"
              clearable
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>

修改后的代码

在el-dialog上添加属性:append-to-body="true"，将弹窗内容传送到body标签中，脱离原表单，避免背原表单校验影响

AddForm.vue

        <el-form-item
          label="机构号"
          prop="assignOrgCodeList"
          v-if="form.scope === 0"
          style="width: 100%"
        >
          <SelectReleaseAgency
            v-model:valueList="form.assignOrgCodeList"
            :form="form"
            :row="row"
          ></SelectReleaseAgency>
        </el-form-item>

SelectReleaseAgency.vue

  <el-select
    v-model="props.valueList"
    placeholder="请选择"
    multiple
    @click="handleSelect"
  >
    <template #tag>
      <el-tag v-for="item in props.valueList" :key="item">{{ item }}</el-tag>
    </template>
  </el-select>
  <el-dialog
    v-model="dialogVisible"
    title="指定定档范围"
    width="60%"
    :before-close="handleClose"
    :append-to-body="true"
  >
    <el-form :model="formInline">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="企业名称" style="width: 100%">
            <SelectAssociateEnterprise
              v-model:value="formInline.enterpriseId"
              :is-edit="true"
              :clearable="true"
            ></SelectAssociateEnterprise> </el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="机构号">
            <el-input
              v-model="formInline.orgCode"
              placeholder="请输入机构号"
              clearable
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>