vue 页面使用两套el-form表单并且嵌套使用el-checkbox

由于项目中需要在页面内使用两套form表单，并且在表单前面加上复选框checkbox，用来替换另一个表单中的数据。

此时使用el-checkbox的change方法进行动态显示替换另一套form中的数据

新数据如下：

<el-form :model="formNew" size="mini">
        <el-form-item label="合同号(新)" :label-width="formLabelWidth">
          <el-checkbox
            v-model="checked.checke1"
            @change="handleChange('contractCode', $event)"
          >
            <el-input v-model="formNew.contractCode"></el-input>
          </el-checkbox>
        </el-form-item>
        <el-form-item label="项目编号(新)" :label-width="formLabelWidth">
          <el-checkbox
            v-model="checked.checke2"
            @change="handleChange('projectCode', $event)"
          >
            <el-input
              v-model="formNew.projectCode"
              autocomplete="off"
            ></el-input>
          </el-checkbox>
        </el-form-item>
        <el-form-item label="公司名称(新)" :label-width="formLabelWidth">
          <el-input v-model="formNew.accountName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目名称(新)" :label-width="formLabelWidth">
          <el-input
            v-model="formNew.opportunityName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="最终用户(新)" :label-width="formLabelWidth">
          <el-input v-model="formNew.lastUser" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签订日期(新)" :label-width="formLabelWidth">
          <el-input v-model="formNew.signDate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单状态(新)" :label-width="formLabelWidth">
          <el-input v-model="formNew.poStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同类型(新)" :label-width="formLabelWidth">
          <el-input
            v-model="formNew.contractType"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="签约方业务类型(新)" :label-width="formLabelWidth">
          <el-input v-model="formNew.entityType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="代理商签约状态(新)" :label-width="formLabelWidth">
          <el-input v-model="formNew.signStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签约类型(新)" :label-width="formLabelWidth">
          <el-input v-model="formNew.signType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品类型(新)" :label-width="formLabelWidth">
          <el-input
            v-model="formNew.fscProductType"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="【调整】签订产品(新)"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formNew.adjustProduct"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="【调整】售卖产品数量(新)"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formNew.adjustProductCount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

 旧数据:

<el-form :model="formOld" size="mini">
        <el-form-item label="合同号" :label-width="formLabelWidth">
          <el-input v-model="formOld.contractCode"></el-input>
        </el-form-item>
        <el-form-item label="项目编号" :label-width="formLabelWidth">
          <el-input v-model="formOld.projectCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input v-model="formOld.accountName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" :label-width="formLabelWidth">
          <el-input
            v-model="formOld.opportunityName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="最终用户" :label-width="formLabelWidth">
          <el-input v-model="formOld.lastUser" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签订日期" :label-width="formLabelWidth">
          <el-input v-model="formOld.signDate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-input v-model="formOld.poStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同类型" :label-width="formLabelWidth">
          <el-input
            v-model="formOld.contractType"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="签约方业务类型" :label-width="formLabelWidth">
          <el-input v-model="formOld.entityType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="代理商签约状态" :label-width="formLabelWidth">
          <el-input v-model="formOld.signStatus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签约类型" :label-width="formLabelWidth">
          <el-input v-model="formOld.signType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品类型" :label-width="formLabelWidth">
          <el-input
            v-model="formOld.fscProductType"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="【调整】签订产品" :label-width="formLabelWidth">
          <el-input
            v-model="formOld.adjustProduct"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="【调整】售卖产品数量"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formOld.adjustProductCount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

export default {
  name: 'Popup',
  data() {
    return {
      centerDialogVisible: false,
      formLabelWidth: '180px',
      checked: {
        // checkox选中的属性
        checke1: '',
        checke2: '',
        checke3: '',
        checke4: '',
        checke5: '',
        checke6: '',
        checke7: '',
        checke8: '',
        checke9: '',
        checke10: '',
        checke11: '',
        checke12: '',
        checke13: ''
      },
      formTmp: {
        contractCode: '666',
        projectCode: '',
        accountName: '',
        opportunityName: '',
        lastUser: '',
        signDate: '',
        poStatus: '',
        contractType: '',
        entityType: '',
        signStatus: '',
        signType: '',
        fscProductType: '',
        adjustProduct: '',
        adjustProductCount: ''
      },
      formOld: {
        contractCode: '666',
        projectCode: '',
        accountName: '',
        opportunityName: '',
        lastUser: '',
        signDate: '',
        poStatus: '',
        contractType: '',
        entityType: '',
        signStatus: '',
        signType: '',
        fscProductType: '',
        adjustProduct: '',
        adjustProductCount: ''
      },
      formNew: {
        contractCode: '55',
        projectCode: '888',
        accountName: '',
        opportunityName: '',
        lastUser: '',
        signDate: '',
        poStatus: '',
        contractType: '',
        entityType: '',
        signStatus: '',
        signType: '',
        fscProductType: '',
        adjustProduct: '',
        adjustProductCount: ''
      }
    }
  },

最最关键的是

methods: {
    handleChange(field, val) {
      if (val) {
        this.formOld[field] = this.formNew[field]
      } else {
        this.formOld[field] = this.formTmp[field]
      }
    }
  }