一个vue组件包含多个form表单（多个组件）的验证

解决大量的表单元素放在一个组件内是会造成页面卡顿的现象

解决方案：一个页面表单拆分成多个页面表单实现

注意事项:

1、父组件引入的子组件要有ref属性，并传入父组件v-model绑定form数据（目的整合所有子组件的form数据）

2、子组件通过props接收父组件传来的数据，watch监听父组件传来的数据， 将其深拷贝给子的v-model绑定form数据

3、子组件正常检验form表单

4、父组件提交时，子组件在父组件的验证通过this.$refs.A(在父注册的子ref名称).$refs.B(子组件form的ref名称)

代码片段：

父组件A.vue

<template>
  <div class="swba_sp">
    <el-form
      ref="swbaForm"
      :model="formCheck"
      label-width="140px"
      :rules="formDataRules"
    >
      <el-row>
        <el-col :span="7">
          <el-form-item label="统一社会信用代码" prop="tyshxydm">
            <el-input v-model="formCheck.tyshxydm" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="组织机构代码" prop="zzjgdm">
            <el-input v-model="formCheck.zzjgdm" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="申请日期" prop="sqrq">
            <el-date-picker
              v-model="formCheck.sqrq"
              type="date"
              placeholder="选择日期"
              value-format="yyyyMMdd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" @click="sp_dzcl">电子材料</el-button>
        </el-col>
      </el-row>
      <div
        class="sp_head"
        style="border: 1px solid rgb(0, 121, 254);color:rgb(0, 121, 254);"
      >
        基本信息
      </div>
      <jbxx-view ref="jbxxRef" :jbxx-map="formCheck"></jbxx-view>
      <div style="position: relative;left: 9.5rem;bottom: 0.68rem;">
        <el-button type="primary" @click="commit_sp('swbaForm')">
          确定
        </el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapService } from 'ty-core/services'
import jbxxView from '@/components/swba/jbxxView'
export default {
  components: {
    jbxxView
  },
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    },
    spBasicInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      swDialogClose: false,
      formCheck: {
        tyshxydm: '',
        zzjgdm: '',
        sqrq: '',
        gsqc: ''
      },
      formDataRules: {
        tyshxydm: [
          {
            required: true,
            message: '请填写统一社会机构代码',
            trigger: 'blur'
          }
        ],
        sqrq: [
          {
            required: true,
            message: '请填写申请日期',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.formCheck = this.spBasicInfo
  },
  methods: {
    commit_sp(formName) {
      let fromValidate = true

      this.$refs.jbxxRef.$refs.spJbxxform.validate((valid) => {
        if (!valid) {
          fromValidate = false
        }
      })
      const jbxxData = this.$refs.jbxxRef.jbxxForm
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          fromValidate = false
        }
      })

      if (fromValidate) {
        const allFormData = Object.assign(
          {},
          jbxxData,
          this.formCheck
        )
        // console.info(allFormData)
        this.saveSwbaCheck(allFormData)
      }
    }
  },
  ...mapService(['swba'])
}
</script>

子组件B.vue

<template>
  <div>
    <el-form
      ref="spJbxxform"
      :model="jbxxForm"
      label-width="100%"
      size="mini"
      label-position="left"
      style="margin:10px"
      :inline="true"
      :rules="jbxxFormRules"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="公司全称" prop="gsqc">
            <el-input v-model="jbxxForm.gsqc" :disabled="showType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="成立时间" prop="clsj">
            <el-date-picker
              v-model="jbxxForm.clsj"
              type="date"
              placeholder="选择日期"
              value-format="yyyyMMdd"
              :disabled="showType"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业性质" prop="qyxz">
            <ty-select
              v-model="jbxxForm.qyxz"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属行业" prop="sshy">
            <ty-select
              v-model="jbxxForm.sshy"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="是否为支持企业" prop="sfzcqy">
            <ty-select
              v-model="jbxxForm.sfzcqy"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年营业额" prop="nyye">
            <ty-select
              v-model="jbxxForm.nyye"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="纳税金额" prop="nsje">
            <ty-select
              v-model="jbxxForm.nsje"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="员工人数" prop="ygrs">
            <ty-select
              v-model="jbxxForm.ygrs"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="需办理备案员工人数" prop="blagrs">
            <ty-select
              v-model="jbxxForm.blagrs"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开展活动年限" prop="kzhdnx">
            <ty-select
              v-model="jbxxForm.kzhdnx"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=活动种类" prop="gahdzl">
            <ty-select
              v-model="jbxxForm.gahdzl"
              data="D_出生地"
              filterable
              properties="label1"
              clearable
              :disabled="showType"
            ></ty-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    jbxxMap: {
      type: Object,
      default() {
        return {
          gsqc: '',
          clsj: '',
          qyxz: '',
          sshy: '',
          sfzcqy: '',
          nyye: '',
          nsje: '',
          ygrs: '',
          blagrs: '',
          kzhdnx: '',
          gahdzl: ''
        }
      }
    },
    shType: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      showType: false,
      jbxxForm: {
        gsqc: '',
        clsj: '',
        qyxz: '',
        sshy: '',
        sfzcqy: '',
        nyye: '',
        nsje: '',
        ygrs: '',
        blagrs: '',
        kzhdnx: '',
        gahdzl: ''
      },
      jbxxFormRules: {
        gsqc: [
          {
            required: true,
            message: '请填写公司全称',
            trigger: 'blur'
          }
        ],
        qyxz: [
          {
            required: true,
            message: '请填写企业性质',
            trigger: 'change'
          }
        ],
        sshy: [
          {
            required: true,
            message: '请填写所属行业',
            trigger: 'change'
          }
        ],
        sfzcqy: [
          {
            required: true,
            message: '请填写是否为国家重点支持企业',
            trigger: 'change'
          }
        ],
        nyye: [
          {
            required: true,
            message: '请填写年营业额',
            trigger: 'change'
          }
        ],
        nsje: [
          {
            required: true,
            message: '请填写纳税金额',
            trigger: 'change'
          }
        ],
        ygrs: [
          {
            required: true,
            message: '请填写员工人数',
            trigger: 'change'
          }
        ],
        blagrs: [
          {
            required: true,
            message: '请填写备案员工人数',
            trigger: 'change'
          }
        ],
        kzhdnx: [
          {
            required: true,
            message: '请填写活动年限',
            trigger: 'change'
          }
        ],
        gahdzl: [
          {
            required: true,
            message: '请填写活动种类',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    jbxxMap() {
      if (this.shType) {
        this.jbxxFormRules = {}
        this.showType = true
      }
      this.jbxxForm = JSON.parse(JSON.stringify(this.jbxxMap))
    }
  }
}
</script>